4、Vue CLI 详细讲解

Vue CLI 详细讲解

1、Webpack

1.1、认识webpack

简单理解就是js的静态模块打包工具 模块 打包

1.2、前端模块化

学习原因

• es6之前进行模块化，必须借助于其他工具，让我们可以进行模块化开发
• 并且在通过模块化开发完成了项目之后，需要处理模块之间个各种依赖，将其进行整合打包
• 其webpack核心就是让我们进行模块化开发,并且会帮助我们处理模块之间的依赖关系不仅仅是js,css,json文件等等
• webpack都可以被当做模块来使用

如何理解打包

就是webpack中各种资源进行打包合成一个或者多个包（bundle.js)
打包过程还可以对资源进行处理，压缩图片将scss转换css,es6语法转换es5语法，ts转换js

1.3、与grunt和gulp对比

grunt,gulp更加强调 前端流程的自动化，模块化不是其核心;webpack强调模块化开发流程，而文件压缩合并，预处理 只是附带的功能

1.4、安装webpack

1、使用之前需要安装nodejs,nodejs自带npm 软件包管理工具
2、查看node版本

node -v

3、全局安装webpack

npm install webpack@3.6.0 -g

4、局部安装 后续需要
–save-dev是开发依赖，项目打包后不需要继续使用

cd 项目目录
npm install webpack@3.6.0 --save-dev

5、为什么全局安装之后，还要继续局部安装？

• 终端执行指令，使用的是全局安装
• 当在package.json定义了scripts,其中包含了webpack命令，那么使用的是局部webpack

1.5、webpack起步

准备工作

• 创建如下文件和文件夹
• 文件和文件夹说明
  • dist文件夹
    用于存放打包的文件
  • src文件夹
    • main.js项目的入口文件
    • mathUtils.js 定义了一些数学工具函数，可以其他地方引用使用
• index.html 浏览器打开展示的页面
• package.json 通过npm init生成的 npm包管理的文件
• mathUtils.js
  

main.js

const math = require("./mathUtils")

console.log(math.mul(30, 10))
console.log(math.add(10, 20))
console.log(math.mul(30, 10))

mainUtils.js

/**
 * 加法
 * @param {入参1} num1 
 * @param {入参2} num2 
 * @returns 
 */
function add(num1, num2) {
    return num1 + num2;
}

/**
 * 减法
 * @param {参数1}} num1 
 * @param {参数2} num2 
 * @returns 
 */
function mul(num1, num2) {
    return num1 - num2;
}

module.exports = {
    add, mul
}

js文件打包

• 目前js文件使用了模块化方式进行开发，他们不可以直接使用，由于直接在index.html引入这两个js问，浏览器不能识别模块化代码；
• 真实项目中有许多这样的js文件时候，我们一个个引用比较麻烦，后期不方便对其进行管理
• 这时候就需要webpack, webpack是一个模块化打包工具，所以它支持我们代码中写模块化，可以对模块化代码进行管理
• 若是处理之后所有模块之间关系，将多个js打包一个js文件，引入比较方便

如何操作

webpack ./src/index.js ./bundle/bundle.js

使用打包后的文件

1.6、webpack配置

入口和出口
有没有一种方案可以不使用 指令 每次进行webpack操作 通过配置方式
创建webpack.config.js文件

const path = require("path")

module.exports = {
  // 入口  可以使字符串/数组/对象 这里我么入口只有一个，故而字符串
  entry: "./src/main.js",

  // 出口 通常是一个对象，里面至少包含两个重要属性 path ,filename
  output: {
    // 注意：path通常是一个绝对路径
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  }
}

局部安装webpack
因为一个项目往往依赖特定的webpack版本，全局的版本可能很这个项目的webpack版本不一致，导出打包出现问题。
1、项目中需要安装自己局部的webpack

npm install webpack@3.6.0 --save-dev

2、通过node_modules/.bin/webpack启动webpack打包

 node_modules/.bin/webpack

定义package.json启动
但是，每次执行都敲这么一长串有没有觉得不方便呢？
OK，我们可以在package.json的scripts中定义自己的执行脚本。
package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。
首先，会寻找本地的node_modules/.bin路径中对应的命令。
如果没有找到，会去全局的环境变量中寻找。

1.7、loader的使用

• loader是webpack的核心概念
• 用来做什么
  • webpack主要用来解决js代码相关依赖问题
  • 但是开发过程中不仅仅有js，还有css,图片，json,es6转换es5,ts转换es5等；
  • 对于webpack这些转换就无能为力了
  • 这时候就需要了webpack扩展的loader
• 使用过程
  • 1、npm下载安装需要的loader
  • 2、webpack.config.js中配置module
    css-loader的使用
• 准备工作
  src目录创建js,css目录，将对应的文件放置对应的位置里面
  css里面创建normal.css，就是将背景设置红色
  但是 样式不会生效 由于我们没有引用它，webpack也不可能找到它，因为只有一个入口，
  webpack只会从如开开始查找其他依赖文件
• 打包报错错误
  若是在入口文件引用

require("./css/normal.css")

body {
   background-color: red;
}

这个错误告诉我们，打包css文件需要相应的loader

• webpack官网中，我们可以找到如下关于样式loader使用方法
• 按照官网配置webpack.config.js文件
  • 注意：配置中有一个style-loader,我们并不知道它是什么，所以可以暂时不进行设置
• 重新打包项目
• 但是运行index.html,你会发现样式并没有生效
  • 因为css-loader只负责加载css文件，但是不负责将具体css样式嵌入文档中国
  • 这个时候需要一个style-loader帮助我们处理

css-loader处理

• 安装

  npm install --save-dev style-loader@2.0.2
  npm install --save-dev css-loader@0.23.1

• 注意：style-loader需要放在css-loader的前面
• 疑惑：不对吧，按照我们的逻辑，在处理css文件过程中，应该是css-loader先加载css文件，再有style-loader进行进一步的处理，为什么将style-loader放在前面？
• 答：由于webpack读取使用loader过程中按照 从右往左的顺序读取
• webpack.config.js配置如下

  module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }

• 重新打包
  
  less文件处理
• 如果希望项目中使用less,scss,stylus来写样式，webpack是否可以帮助我们处理
• 来以less为例
• 创建less文件，依然放在css文件夹

special.less

@fontSize: 50px;
@fontColor: orange;

body {
  font-size: @fontSize;
  color: @fontColor;
}

main.js

// 1.使用commonjs的模块化规范
const {add, mul} = require('./js/mathUtils.js')

console.log(add(20, 30));
console.log(mul(20, 30));

// 2.使用ES6的模块化的规范
import {name, age, height} from "./js/info";

console.log(name);
console.log(age);
console.log(height);

// 3.依赖css文件
require('./css/normal.css')

// 引入less文件
require('./css/special.less')

// 为了检查less代码生效，添加一个div
document.writeln('<div>hello world</div>')

进行打包操作

npm run build

less文件处理 less-loader

• 继续官网查找，找到less-loader先通过官使用说明
• 安装对应 的loader
  • 这里还需要安装lerss，由于webpack使用less对less文件进行编译

npm install --save-dev less-loader less

• 其次修改对应的配置文件
  • 添加一个rules选项，用于处理less文件

  {
        test: /\.less$/,
        use: [{
          loader: "style-loader", // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
        }]
      },

图片文件处理
首先，项目中添加两张图片

• 小图片test01.jpg(小于8kb),一张较大图片test02.jpg(大于8kb)
• 待会针对两张图片进行不同处理

修改normal.css样式

body {
   /*background-color: red;*/
   background: url("../img/timg.jpg");
 }

打包报错

• 图片处理，我们使用url-loader来处理，依然先安装url-loader

npm install --save-dev url-loader file-loader

修改webpack.config.js

      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
              // 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
              limit: 13000,
              name: 'img/[name].[hash:8].[ext]'
            },
          }
        ]
      },

修改文件名称

• 我们发现webpack自动生成一个非常长的名字

  • 这是一个32位hash值，目的是防止名字重复
  • 但是，真是开发中，我们可能对打包的图片有一定的要求
  • 比如，将所有的图片放在一个文件夹，跟上图片原来的名称，同时也要防止重复

• options配置如下选项

  • img: 文件要打包到的文件夹
  • name: 获取原来图片的名称，放在该位置
  • hash:8 为了防止图片名称冲突，依然使用hash，但是只保留8位
  • ext:使用图片原来的扩展名

• 但是我们发现图片并没有显示出来，由于图片使用路径不正确

  • 默认情况，webpack会将生成的或经直接返回给使用者
  • 但是，我们整个程序是打包在dist文件夹下的，所有这里需要在路径下添加一个dist/

  

babel使用
查看webpack打包之后的js文件，发现还是es6语法，尚未更改es5;需要转换es6-》es5
直接安装babel的loader,执行以下指令

  npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

配置webpack.config.js

{
        test: /\.js$/,
        // exclude: 排除
        // include: 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },

1.8、webpack配置vue

• 后续项目中，我们会使用Vuejs进行开发，而且会以图书的文件来组织vue的组件
• 安装vue需要的运行时依赖

npm install vue --save

1.9、搭建本地服务器

2、Vue Cli

2.1、是什么

• 你只是简单写几个Vue的Demo程序,那么你不需要Vue CLI
• 你在开发大型项目,那么你需要,并且必然需要使用 Vue CLi
  • 使用Vue开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
  • 如果每个项目都要手动完成这些工作,那无以效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情
• Cli是什么意思
  • 是 Command- Line Interface,翻译为命令行界面,但是俗称脚手
  • 官方发布的vue.js项目脚手架
  • 使用wue-cli可以快速搭建vue开发环境以及对应的 webpack配置

2.2、使用前提

Node

• 安装NodeJS

  http://nodejs.cn/download/

• 检测安装的版本

  默认情况自动安装node 和npm
  node环境需要8.9以上
  node -v

cnpm安装
由于国内直接使用npm的官方镜像是非常慢的,这里推荐使用淘宝NPM镜像。
你可以使用淘宝定制的cnpm (gzip压缩支持)命令行工具代替默认的npm:

npm install-g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用cnpm命令来安装模块了:

cnpm install [name]

webpack

• Vue.js官方脚手架工具就使用了webpack模板
  • 它会对所有的资源会压缩等优化操作
  • 它在开发过程中提供了一套完整的功能,能够使得我们开发过程中变得高效。
• Webpack的全局安装

npm install webpack -g

2.3、使用情况

安装Vue脚手架

npm install-g @vue/cli

注意:上面安装的是Vue CLI3的版本,如果需要想按照Vue CLI2的方式初始化项目时不可以的。

Vue CLI2初始化项目

vue init webpack my-project

Vue CLI3初始化项目

vue create my-project

3、Vue Cli2的使用

目录结构

runtime-complier 和 runtime-only 区别

• 简单总结
  • 如果在之后的开发中,你依然使用template,就需要选Runtime-Compiler
  • 如果你之后的开发中,使用的是.vue文件夹开发,那么可以选择Runtime-only
    

render和template

vue程序的运行过程

render函数的使用

webpack.base.config.js起别名

4、Vue Cli3的使用