Vue学习笔记（7）

1、总结复习

02-webpack-basic

（1）app.vue

（2）main - 1 处理less.js

// 处理图片文件

// 处理图片文件，可以使用 url-loader 或者 file-loader

// file-loader 对图片进行重命名，然后，加载图片

// 1 安装： npm i -D file-loader
// 2 在 webpack.config.js 中的 module 里面添加一个rules

// 自己写的路径为：../imgs/a.jpg
// 文件路径被重命名为： 1ddb3677198212f7fea7ca4b9de18dcb.jpg

// MD5 加密算法（消息摘要算法） 通常就是 32 位
// 对于同一个文件 或者 字符，不管使用 md5 处理过多少次，那么，得到的 32位字符串 都是相同的

// 在 file-loader 中，使用 md5 处理后，对于同一张不同名称的图片，只会加载一次
// 而如果不进行 md5 处理，就会加载两次，而这两张图片实际上就是同一张，实际上加载一次就可以了
// 这样的话，可以达到减少网络请求，加快网站的加载速度

// MD5 在项目中，一般可以用来进行密码加密处理

// 用户名 + 密码 ====> md5( 密码 ) ===> 1ddb3677198212f7fea7ca4b9de18dcb => 存储到数据库中

// 导入带有图片的CSS文件
import './css/index.css'

（3）main - 2 处理图片（file-loader）.js

// 处理图片文件

// 处理图片文件，可以使用 url-loader 或者 file-loader

// file-loader 对图片进行重命名，然后，加载图片

// 1 安装： npm i -D file-loader
// 2 在 webpack.config.js 中的 module 里面添加一个rules

// 自己写的路径为：../imgs/a.jpg
// 文件路径被重命名为： 1ddb3677198212f7fea7ca4b9de18dcb.jpg

// MD5 加密算法（消息摘要算法） 通常就是 32 位
// 对于同一个文件 或者 字符，不管使用 md5 处理过多少次，那么，得到的 32位字符串 都是相同的

// 在 file-loader 中，使用 md5 处理后，对于同一张不同名称的图片，只会加载一次
// 而如果不进行 md5 处理，就会加载两次，而这两张图片实际上就是同一张，实际上加载一次就可以了
// 这样的话，可以达到减少网络请求，加快网站的加载速度

// MD5 在项目中，一般可以用来进行密码加密处理

// 用户名 + 密码 ====> md5( 密码 ) ===> 1ddb3677198212f7fea7ca4b9de18dcb => 存储到数据库中

// 导入带有图片的CSS文件
import './css/index.css'

（3）main - 3 处理图片（url-loader）.js

// 处理图片文件

// 处理图片文件，可以使用 url-loader 或者 file-loader

// 推荐使用 url-loader
// 1 安装： npm i -D url-loader
//          最好将 file-loader 一起安装
// 2 在 webpack.config.js 中，只要将 file-loader 替换为 url-loader 就可以了

// url-loader 默认情况下，会将图片处理为base64编码的格式
// data:image/png;base64, ....

// 导入带有图片的CSS文件
import './css/index.css'

（4）main - 4 处理字体.js

// 处理字体文件

// 处理方式与 图片 处理方式完全一样

// 导入字体文件的样式
import './css/font-awesome/css/font-awesome.css'
import './css/index.css'

（5）main - 5 babel.js

// babel 是用来将 最新的JS 语法转化为浏览器能够识别的语法

// JS 语法的规范： ECMAScript
// es5
//
// ES6 ---> ES2015
// ES7 ---> ES2016
// ES8 ---> ES2017
// ES9 ---> ES2018
// ...
//
// 一般我们说 ES6 就表示JS最新的语法特性

// JS语法提案的流程：

class Person {
  constructor() {
    this.name = 'jack'
  }
}

const p = new Person()
console.log(p.name)

const obj = {
  name: 'jack',
  age: 19
}

// 对象扩展运算符不是一个标准的ECMAScritp语法
const obj1 = { ...obj, gender: 'male' }
console.log(obj1)

（6）main.js

// Vue中的单文件组件

/* 
  处理 Vue 中的单文件组件：
  
  1 安装：npm i -D vue-loader vue-template-compiler
  2 在 webpack.config.js 中添加一个 rule
  3 还需要额外的添加一个插件 VueLoaderPlugin

  4 创建一个 App.vue 以.vue为后缀的单文件组件
  5 单文件组件有三个组成部分： template / script / style
  6 在 main.js 入口中导入这个单文件组件
  7 在 vue实例 中，通过 render 方法来渲染这个组件
*/

// 1 导入Vue
import Vue from 'vue'

// 3 导入创建好的单文件组件
import App from './App.vue'

// 2 创建Vue实例
const vm = new Vue({
  el: '#app',
  data: {},

  // 4 渲染组件
  // render: function(createElement) {
  //   return createElement(App)
  // }
  // render: (createElement) => {
  //   return createElement(App)
  // }
  // render: (c) => {
  //   return c(App)
  // }
  render: c => c(App)
})

（7）index.html

  
  
  
  



  


  
  

    
这是第1个li元素
    
这是第2个li元素
    
这是第3个li元素
    
这是第4个li元素
    
这是第5个li元素
    
这是第6个li元素
    
这是第7个li元素
    
这是第8个li元素
    
这是第9个li元素
    
这是第10个li元素
  

  


  


  
  
  
  

  
  

（8）webpack.config.js

// 注意: 不要使用 ES6 中的模块化语法 import/export
const path = require('path')
// const webpack = require('webpack')

// 导入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 处理Vue单文件组件的插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // 入口
  entry: path.join(__dirname, './src/main.js'),

  // 出口
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },

  // 模式
  mode: 'development',

  devServer: {
    // 自动打开浏览器
    open: true,
    // 修改端口号
    port: 3000
    // 热更新: 只将修改过得内容加载到页面中, 而不是刷新整个页面
    // 第一步:
    // hot: true
  },

  // 配置loader
  module: {
    rules: [
      // test 是一个正则, 用来匹配加载文件的路径
      //  比如: import './css/index.css'

      // use 表示使用哪个loader来处理这个类型的文件
      // 注意: 有顺序!!!
      // 处理过程是: 从右往左

      // css-loader 读取CSS文件,将其转化为一个模块
      // style-loader 拿到css-loader读取到的css文件内容,然后,创建一个style标签,插入到head
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

      // 处理图片
      // {
      //   test: /\.(jpg|jpeg|png|gif)$/,
      //   use: 'file-loader'
      // },

      {
        test: /\.(jpg|jpeg|png|gif)$/,
        // use: 'url-loader'
        use: [
          {
            loader: 'url-loader',
            options: {
              // 单位：字节， 8Kb
              // 如果图片的大小比 8kb 小，图片就会被处理为 base64
              // 如果图片的大小大于或等于 8kb ，url-loader会自动调用 file-loader 来对图片重命名处理
              // limit: 8192
              limit: 49877
            }
          }
        ]
      },

      // 处理字体
      {
        test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
        // use: 'file-loader'
        use: 'url-loader'
      },

      // 配置babel
      {
        test: /\.js$/,
        use: 'babel-loader',
        // 排除掉不需要 babel 处理的文件路径
        // 一般，都会将 node_modules 排除掉
        exclude: /node_modules/
      },

      // 处理Vue单文件组件
      {
        test: /\.vue$/,
        use: 'vue-loader'
      }
    ]
  },

  plugins: [
    // 第二步:
    // new webpack.HotModuleReplacementPlugin(),

    new HtmlWebpackPlugin({
      // 指定模板文件路径
      template: path.join(__dirname, 'index.html')
    }),

    new VueLoaderPlugin()
  ]
}

（9）index.html

4、-base64编码格式的介绍.html

5、复习总结

6、shop-admin

（1）Login.vue

（2）index.js

import Vue from 'vue'
import Router from 'vue-router'

// 导入 Login 组件（注意，不要添加 .vue 后缀）
import Login from '@/components/login/Login'

Vue.use(Router)

export default new Router({
  routes: [{ path: '/login', component: Login }]
})

（3）app.vue

（4）main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

// 导入elementui - js
import ElementUI from 'element-ui'
// 导入elementui - css
import 'element-ui/lib/theme-chalk/index.css'
// 安装插件
Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

7、shop-admin（项目搭建）

8、Vue Cli 的说明

初始化项目报错

• 清除 npm 缓存文件：npm cache clean --force

如何关闭 ESLint 代码风格校验

• 在 config/index.js 中将 useEslint 设置为 false

自定义 ESLint 校验规则

• 在 .eslintrc.js 中添加 'space-before-function-paren': 'off' 关闭 方法名字后的空格校验规则

• 前提：如果使用了老师的 VScode 配置（ prettier ）

目录结构的总结

• 只需要在 src 目录中写 Vue 代码即可，其他的目录暂时不要动它

src 目录结构的说明

 

/assets           放置资源文件，比如：图片、css

/components       放项目中所有的组件

/router           路由配置

App.vue           根组件

main.js           项目的入口文件，Vue实例就是在这个文件中创建的

Vue 不同构建版本的说明

• 1 完整版（运行时+编译器）

• 2 运行时（体积比完整版小 30%）

• 3 import Vue from 'vue' 默认导入的是：运行时版本

• 4 如果要使用完整版，需要在 webpack 中添加一个 alias 配置才可以

  • build/webpack.base.conf.js 中 resolve 的 alias

// 完整版：
new Vue({
  el: '#app',
  router,

  // 脚手架生成的项目中，默认采用完整版（运行时+编译器）
  components: { App },
  template: ''
})

// 运行时版：
const vm = new Vue({
  el: '#app',
  data: {},

  render: c => c(App)
})

@符号的说明

• 在 vue cli 生成的项目中 @ 符号就表示 src 路径

9、Vue 项目说明

项目搭建

• 1 vue init webpack shop_admin

Project name                            ：默认
Project description                     ：默认
Author                                  ：默认
Vue build                               ：选择 Runtime + Compiler
Install vue-router?                     ：Y
Use ESLint to lint your code?           ：Y 选择 Standard
Set up unit tests                       ：n
Setup e2e tests with Nightwatch?        :n
Should we run `npm install` for you after the project has been created? (recommended) : Yes, use NPM

• 2 进入项目：cd shop_admin

• 3 运行项目：npm run dev

• 将脚手架默认生成的内容去掉，然后，添加了一个 Login 组件

如何添加一个新的功能？？？

• 1 在 components 中新建一个文件夹（login），在文件中创建组件(Login.vue)

• 2 在 router/index.js 中导入组件（Login.vue）

• 3 配置路由规则

在项目中使用 element-ui

• ElementUI 文档

• 安装：npm i element-ui -S