web前端开发之vue常见问题
电商后台项目
一、上传gitee
因为我们的项目使用的是vue脚手架创建的
所以上传到码云的时候不需要再次进行初始化
gitee官网
登陆自己账户之后 我们只需要新建仓库
输入自己的仓库名称 直接点击创建即可
创建成功之后如下界面
我们只需要在你需要上传的目录中打开 Gie Bash Here
按照上面说明，进行本地操作
- 本地 目录下新建 README.md ，可以使用 touch 命令，或者手动创建
- 添加 README.md 到暂存区 git add README.md
- 提交更改 git commit -m 'first commit 添加对应的远程仓库 git remote add origin … ，注意要使用自己的地址
- 推送本地仓库到远程仓库 git push -u origin master
二、配置Element -UI
安装element-ui
npm i element-ui -S
按需引入：
在入口文件main.js中引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
三、配置Axios
安装
npm install axios
配置
// 挂载axios
Vue.prototype.$http = axios;
// 配置axios基准地址
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
- 因为我们不止一个组件要使用Axios
- 所以我们同样要在main.js中引入axios
- 挂载axios之后我们就可以使用this.$http代替axios
- 配置基准地址是为了每次请求时不在输入 避免麻烦
四、less-loader
我们使用到less语法时 需要安装less 和 less-loader
npm install less less-loader -D
但是 安装之后 打包依旧会报错
这是因为 less 和less-loader不兼容导致的
解决方案：卸载高版本less-loader
npm uninstall less-loader
再安装低版本，从这里选择一个版本安装，比如 7.3.0
npm i [email protected]
五、设置全局样式
全局样式，就是所有或者大部分组件都需要用到的样式
可以在 App.vue 中直接设置，这样凡是通过 App.vue 中的路由出口展示的组件，都会使用此样式
但过路由出口展示的组件则不会使用，另外，如果样式过多，也很乱
推荐做法：
- assets 中新建 css 目录
- css 目录下新建 common.css
- 并在main.js中引入common.css
六、添加iconfont字体
不建议下载到本地引入 因为包较大
我们需要将上面路径复制
并在public目录下的index.html中引入
"stylesheet" href="//at.alicdn.com/t/font_2421358_xludpml4fa.css">
然后使用icon图标即可
七、表单验证
- 给表单添加属性:rules=“formRules”，formRules是一堆验证规则，定义在script中
- 在data中定义formRules规则的具体内容
// 定义验证规则列表
FormRules: {
username: [
{
required: true, message: "请输入用户名", trigger: "blur" },
{
min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" }
],
password: [
{
required: true, message: "请输入密码", trigger: "blur" },
{
min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
]
}
注意的是：
FormRules下的属性名要与输入框绑定的属性名一致
- 通过的prop属性设置验证规则
<el-form-item label="用户名" prop="username">
八、异步改造
异步嵌套总是很多：
- validate 的参数是回调函数
- post 方法返回的虽然是一个 promise ，但promise 的 then 方法也是一个回调函数
promise 虽然结局了回调地狱的问题，但同时大量的链式调用也让人深恶痛绝，今天我们就一劳永逸的解决这个问题
async+await
让我们以一种更加优雅的方式调用执行 promise
- await 关键字可以让 async 函数暂停执行，等执行完 await 修饰的函数，再继续执行函数后面的代码
- await 函数修饰的函数返回值因该是一个 Promise，如上面的 validate 函数的返回值就是 promise
- 如果promise 内部执行成功，则执行 resolve 方法，返回值会作为 await 修饰函数的返回值
- 如果promise 内部执行失败，则执行 reject 方法，我们需要使用try catch 捕获这个异常。所以严格来说，我们应该使用 try catch 修饰
async submitLogin(form) {
try {
await this.$refs.form.validate();
// 验证通过执行登陆逻辑
let res = await this.$http.post("login", this.loginForm);
// console.log(res)
const {
msg, status } = res.data.meta;
if(status == 400){
// console.log(msg)
this.message=msg
return false
}
localStorage.setItem('token',res.data.data.token)
this.$router.push('/home')
// console.log(res.data)
} catch (err) {
this.message="验证不通过"
}
},
如果不使用try和catch的话：
await this.$refs.form.validate()不成立时控制台会报错
所以需要try嵌套 catch为失败执行