网站信息架构,app搭建开发,wordpress 快站,手机pc网站共用数据库目录
一、实验
1.环境
2.初始化前端项目
3.安装 vue-route
4.安装 pinia
5.安装 axios
6.安装 Element Plus
7.gitee创建工程
8. 配置路由映射
9.Vite 使用 Element Plus
二、问题
1.README.md 文档推送到gitee未自动换行
2.访问login页面显示空白
3.表单输入账户…目录
一、实验
1.环境
2.初始化前端项目
3.安装 vue-route
4.安装 pinia
5.安装 axios
6.安装 Element Plus
7.gitee创建工程
8. 配置路由映射
9.Vite 使用 Element Plus
二、问题
1.README.md 文档推送到gitee未自动换行
2.访问login页面显示空白
3.表单输入账户与密码按钮依然为禁用状态 一、实验
1.环境
1主机
表1 主机 系统 软件版本备注Windows11VS Code1.96.2Node.jsv18.20.4(LTS) 运行输入cmd 查看VS Code版本
Code --version 查看node版本
node -v 查看npm版本
npm -v 2.初始化前端项目
1安装vite
cnpm create vitelatest
输入y然后选择vue
接下来选择JavaScript 2安装依赖
切换目录
cd vite-axios 这里切换cnpm安装依赖
cnpm install (3) 运行
npm run dev 弹出界面 可以访问到Vite Vue
http://localhost:5173/ 4退出
CTRL C 结束 输入Y 3.安装 vue-route
(1) 查阅
https://router.vuejs.org/zh/installation.html
(2) 安装vue-router
使用cnpm安装
cnpm install vue-router4 (3) main.js集成路由
导入router
import router from ./router
注册路由
const app createApp(App)
app.use(router)
app.mount(#app)修改前 修改后 4创建路由配置目录router 5 router下创建index.js 实现组件与路由映射 6修改index.js
导入创建路由的方法
import { createWebHistory, createRouter } from vue-router
定义路由映射
const listRoutes {}const routes [listRoutes,
]创建路由实例
const router createRouter({history: createWebHistory(),routes,
})
导出默认路由
export default router (7) 运行
npm run dev 弹出界面 可以访问到Vite Vue
http://localhost:5173/ 8退出
CTRL C 结束 输入Y 4.安装 pinia
(1) 查阅
https://pinia.vuejs.org/zh/getting-started.html (2) 安装pinia
使用cnpm安装
cnpm install pinia (3) main.js集成pinia
导入创建pinia的方法
import { createPinia } from pinia
注册pinia
const pinia createPinia()
app.use(router).use(pinia)
app.mount(#app)修改前 修改后 5创建全局状态(容器)目录store 6store下创建index.js 7修改index.js
导入定义Store
import { defineStore } from pinia
state 是 store 的数据 (data)getters 是 store 的计算属性 (computed)而 actions 则是方法 (methods)
export const useStoreDemo defineStore(storeDemo, {state: () {return {msg: This is Pinia} },getters: {},actions: {changeStoreDemo(value) {this.msg value}}
}) 5.安装 axios
(1) 查阅
https://www.axios-http.cn/docs/intro
(2)安装axios
使用cnpm安装
cnpm install axios (3) 创建封装目录api 4api下创建index.js (5)修改 index.js
import axios from axios
const request (url , data {}, method get, timeout 5000) {return new Promise((resolve, reject){const methodLower method.toLowerCase() if (methodLower get) {axios({method: methodLower,params: data,timeout: timeout,url: url,}).then((response){resolve(response)}).catch((error){reject(error)})} else if (methodLower post) {axios({method: methodLower,data: data,timeout: timeout,url: url,}).then((response){resolve(response)}).catch((error){reject(error)})}})
}export default request 6.安装 Element Plus
(1) 查阅
https://element-plus.org/zh-CN/guide/installation.html (2)安装Element Plus
使用cnpm安装
(--save 参数 在装的时候会把包的信息写入package.json )
cnpm install element-plus --save (3) 查看package.json 4查阅
https://element-plus.org/zh-CN/guide/quickstart.html 5main.js集成Element Plus
……
import ElementPlus from element-plus
import element-plus/dist/index.css
……
app.use(router).use(pinia).use(ElementPlus) 修改前 修改后 (6) 运行
npm run dev 弹出界面 可以访问到Vite Vue
http://localhost:5173/ F12 查看控制台 目前暂未配置路由 7退出
CTRL C 结束 输入Y 7.gitee创建工程
1新建仓库
https://gitee.com/ 2创建 3创建 git 仓库
git init git add . git add -A git commit -m 项目初始化配置 XXXXXXXX/vite-scaffold为创建的gitee仓库
git remote add origin gitgitee.com:XXXXXXXX/vite-scaffold.git git push -u origin master(4) gitee查看 5修改README.md
# scaffold项目初始化配置cnpm create vitelatest
cnpm install
cnpm install vue-router4
cnpm install pinia
cnpm install axios
cnpm install element-plus --save 6git查看状态
git status (7) 提交并推送
git commit -am 修改文档 git push -u origin master8gitee查看 8. 配置路由映射
1创建页面组件目录view 2view下创建多个组件
Login.vue 然后把compoents下的HelloWorld.vue 内容复制到Login.vue 3修改router下的index.js
通过懒加载形式把Login.vue导入
const Login () import(../view/Login.vue)
添加路由映射关系
……
const routes [listRoutes,{path: /login,component: Login,}
]
^ 4路由输出到App.vue
修改App.vue
……
router-view/router-view
…… (5) 运行
npm run dev 弹出界面 可以访问到Vite Vue
http://localhost:5173/login 6退出
CTRL C 结束 输入Y 9.Vite 使用 Element Plus
1查阅
https://element-plus.org/zh-CN/component/card.html 2修改Login.vue
添加卡片
templateel-card classbox-cardp v-foro in 4 :keyo classtext item{{ List item o }}/p/el-card
/template
样式
style scoped.text {font-size: 14px;} .item {padding: 18px 0;}.box-card {width: 480px;}
/style 3 访问到Vite Vue
http://localhost:5173/login 4git查看状态
git status (5) 提交
git add -Agit commit -am 首页路由配置 6添加标题元素
修改Login.vue
……
h2DevOps系统/h2
…… 7 访问到Vite Vue
http://localhost:5173/login 8查阅表单
https://element-plus.org/zh-CN/component/card.html 9添加表单
修改Login.vue
el-form:modelloginInfostatus-icon:rulesrulesel-form-item propusernameel-input v-model.numberloginInfo.username //el-form-itemel-form-item proppasswordel-input v-modelloginInfo.password typepassword autocompleteoff //el-form-itemel-form-itemel-button typeprimary clicksubmitForm(ruleFormRef)登录/el-button/el-form-item/el-form 10访问到Vite Vue
http://localhost:5173/login 11查阅输入框与图标
输入框
https://element-plus.org/zh-CN/component/input.html 图标
https://element-plus.org/zh-CN/component/icon.html 12安装图标
cnpm install element-plus/icons-vue --save 13找到username图标
https://element-plus.org/zh-CN/component/icon.html 点击图标 显示已复制 获取到图标信息
el-iconUser //el-icon
(14)找到password图标 点击图标 显示已复制 获取到图标信息
el-iconLock //el-icon
(15) 添加图标并将图标映射到输入框中
修改Login.vue
……
import { User,Lock } from element-plus/icons-vue;
……
:prefix-iconUser
……
:prefix-iconLock
…… 16访问到Vite Vue
http://localhost:5173/login 17git提交
git commit -am 输入框与按钮配置 18查阅输入框设置固定宽度
https://element-plus.org/zh-CN/component/input.html 19添加clearable 图标
修改Login.vue
clearable 20访问到Vite Vue
http://localhost:5173/login 21查阅切换密码图标 22添加切换密码图标
修改Login.vue
show-password 23访问到Vite Vue
http://localhost:5173/login 24查阅输入框占位文本 25添加输入框占位文本
修改Login.vue
……
placeholder请输入账户名
……
placeholder请输入密码
…… 26访问到Vite Vue
http://localhost:5173/login 27查阅表单校验
https://element-plus.org/zh-CN/component/form.html 28表单添加校验
修改Login.vue
import { reactive,ref } from vue;
……
const loginRef ref()
const rules reactive({username: [{ required: true, message: 请输入账户名, trigger: blur },],password: [{ required: true, message: 请输入密码, trigger: blur },],
})
……
refloginRef
:rulesrules
…… 29访问到Vite Vue
http://localhost:5173/login 30查阅按钮禁用状态
https://element-plus.org/zh-CN/component/button.html 31登录按钮添加禁用状态
import { watch } from vue;
……
let loginButtonDisabled ref(true)
watch([() loginInfo.username,() loginInfo.password],() {loginRef.value.validate((valid){if(valid){loginButtonDisabled false} else {loginButtonDisabled true}})
})
……
:disbaledloginButtonDisabled
…… 32访问到Vite Vue
http://localhost:5173/login
未输入账户或密码。登录按钮为禁用状态 浅蓝色
未输入密码。登录按钮为禁用状态 浅蓝色 输入账户与密码。登录按钮为启用状态 深蓝色 33git提交
git commit -am 输入框与按钮配置 二、问题
1.README.md 文档推送到gitee未自动换行
1问题
README.md写好内容时发现它缩到一起了不是想要的格式 2原因
换行末尾未打上空格。
3方法 直接在要换行的语句最后打上2个空格 git push后成功换行 2.访问login页面显示空白
1问题
访问login页面空白
2原因
渲染配置错误
(3) 方法
修改前 修改后 成功 3.表单输入账户与密码按钮依然为禁用状态
1问题
表单输入账户与密码按钮依然为禁用状态 浅蓝色 2原因分析
watch监听状态的值判断需要配置正确
3方法
修改watch监听里if判断
修改前 修改后 成功
图标显示深蓝色
