Vue学习笔记

代码地址: https://github.com/Zhuyaqiang/vue_shop

一、webpack

1. 打包处理js文件中的高级语法(自定义类等)

   • 安装babel转换器相关的包npm install babel-loader @babel/core @babel/runtime -D
   • 安装babel语法插件相关的包npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
   • 在项目根目录中,创建babel配置文件babel.config.js,内容如下:

   module.exports = {
       presets: ['@babel/preset-env'],
       plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
   }
   

2. html添加vue语法支持
   File->Setting->Editor->Inspection

3. vue单文件模板

   <template>
   template>
   
   <script>
   script>
   
   <style scoped>
   style>
   

二、webpack

1. 初始化

   $ npm init
   $ npm install [email protected] -D
   $ npm install html-webpack-plugin -D
   

   • 添加webpack.config.js文件,设置webpack编译的入口和出口文件
   • package.json文件添加dev项

2. 配置vue组件的加载器

   • 运行npm install vue-loader vue-template-compiler -D命令
   • 在webpack.config.js配置文件中,添加vue-loader的配置项

   const VueLoaderPlugin = require('vue-loader/lib/plugin')
   module.exports = {
       module: {
           rules: []
       },
       plugins: [
           nue VueLoaderPlugin()
       ]
   }
   

3. webpack打包发布
   修改package.json文件,添加如下内容

    "script": {
        "build": "webpack -p",
        "dev": :webpack-dev-server --open 
   }  
   

   之后通过npm run build命令打包

三、脚手架

1. 创建项目方法(需局部安装最新webpack)

   • vue ui
   • vue create
   • vue init webpack 项目名(2.x)

2. Vue脚手架生成的项目结构分析

   • node_modules—依赖包目录
   • public—静态资源目录
   • src—组件源码目录
   • babel.config.js—babel配置文件

3. 选项

   手动-Router、Linter/Formatter、使用配置文件-关闭use history mode formatter router、Pick a linter使用standard

4. 定义配置

   • 通过package.json文件配置,添加如下(不推荐)

     "vue": {
         "devServer": {
           "port": 8888,
           "open": true
         }
       }
     

   • 通过单独的配置文件配置,在根目录下创建vue.config.js文件

     module.exports = {
       devServer: {
         open: true,
         prot: 8878
       }
     };
     
     

5. Element-UI的基本使用

   • 安装

     • 基于命令行方式手动安装

       1. 安装依赖包npm install element-ui -S

       2. 导入相关资源

          import ElementUI from 'element-ui'
          import 'element-ui/lib/theme-chalk/index.css'
          Vue.use(ElementUI)
          

     • 基于图形化界面自动安装

       1. 运行vue ui进入图形化界面
       2. 点击插件->添加插件
       3. 搜索vue-cli-plugin-elemnt安装
       4. 选按需导入

四、实战

电商项目

1. 登录

• idea去除js文件分号提示:设置搜索unterminated statement取消勾选.设置换行自动缩进:设置搜索code style

• vue-cli生成的项目js支持分号设置:https://www.jianshu.com/p/b97d8ed16701

• git push -u origin user 推送到origin仓库的新建user分支

• 使用el-form、el-form-item、el-input、el-button

• vue管理器-依赖-安装依赖-开发依赖-less loader和less

• 登录区三个div(大背景框login_container, 登录框login_box, 头像框avatar_box)

• 输入用户名和密码的输入框使用下的,框前图标为prefix-icon=""使用阿里的图标(也可以使用官方)库, 需在main.js导入iconfonts.css. 登录注册按钮使用.

• 数据绑定, el-form通过:model=""绑定到对象, 具体的el-input通过v-model=""绑定到对象的属性上

• 验证规则, el-form通过:model绑定到对象, 具体的el-form-item通过v-model绑定到对象的属性(规则)上

• 重置表单, 通过给设置引用名称, 再通过this.$refs.xxx获取表单对象, 调用resetFields()函数

• 表单预验证(前端), 通过获取表单对象之后调用validate()函数

• 向数据库验证, 返回是promise应该await简化promise操作, 同时, await只能用在async修饰的方法中. main.js中配置axios, 使用this.$http发起请求

• 弹窗提示, 在element.js中导入提示框组件, 同时全局挂载, 使用this.$message.success()等调用

• 登陆成功后记录token, 通过编程式导航跳转到相应页面this.$router.push('/home')(需在router/inde.js中加入相应规则)

• 路由导航守卫, 用户没有登录通过URL访问特定页面, 重定向到登录页面.

  router.beforeEach((to, from, next) => {
      if (to.path === '/login') return next()
      const tokenStr = window.sessionStorage.getItem('token')
      if (!=tokenStr) return next('/login')
      next()
  })
  

• 退出功能, 清空tokenwindow.seeesionStorage.clear(), 跳转到登录页this.$router.push('/login')

• 关闭eslint强制校验函数名和括号间空格, 在.eslintrc.js文件的rules中加入'space-before-function-paren': 0

2. 主页

• 使用、、和

• 导航菜单使用、、

• Axios拦截器(向后台请求需要权限的接口时需在请求头部的Authorization部分加入token)

  axios.interceptors.request.use(config => {
    config.headers.Authorization = window.sessionStorage.getItem('token')
    console.log(config)
    return config
  })
  

• 通过查询数据库获取左侧菜单栏

• 两层v-for循环创建左侧一二级菜单, :index动态绑定不同的值, 否则点击时会打开或关闭inde相同的菜单项

• 修改选中项颜色, 通过iconsObj对象动态添加图标

• 左侧菜单优化: 一次只能打开一个一级菜单. 将el-menu的右侧border-right设置为0可以消除菜单右侧未对齐

• 左侧菜单优化: 通过设置菜单的折叠与展开以及取消折叠动画. 根据isCollapse的值动态设置侧边栏的宽度

• 路由重定向, 设置自路由使/home自动跳转至/welcome

• 为侧边栏菜单开启路由模式, index属性可以作为跳转地址

• 将跳转地址路由加入到home子路由中

• 左侧菜单点击高亮效果保存.

3. 用户列表

• 绘制面包屑导航, 卡片视图, 和实现栅格布局

• axios获取用户列表数据, 渲染表格, :data指定数据源, border设置边框, stripe设置斑马纹. 设置列.

• 在表格中渲染开关: 通过作用域插槽