vue 全家桶 - 前端工程化

电玩女神 2022-12-26 13:30 150阅读 0赞

### 目录 ###

*  主要内容
 *  1. 模块化相关规范
 *   *  1.1 模块化概述
     *  1.2 模块化规范
     *   *  A. 浏览器端的模块化
         *  B. 服务器端的模块化
         *  C. 大一统的模块化规范 – ES6模块化
     *  1.3 体验ES6模块化 - 在 NodeJS 中安装 babel
     *   *  1.3.1 安装 babel
         *   *  A. 安装 babel
             *  B. 创建 babel.config.js
             *  C. 创建 index.js 文件
             *  D. 使用 npx 执行文件
     *  1.4 ES6 模块化的基本语法
     *   *  1.4.1 默认导出与导入
         *   *  A. 默认导出
             *  B. 默认导入
         *  1.4.2 按需导入 与 按需导出
         *   *  A. 按需导出
             *  B. 按需导入
         *  1.4.5 直接导入并执行模块代码
 *  2. webpack
 *   *  2.1 webpack概述
     *  2.2 webpack 的基本使用
     *  2.3 webpack 中的加载器
     *   *  2.3.1 通过 \*\*loader\*\* 打包非 js 模块
         *  2.3.2 loader 的调用过程
     *  2.4 加载器的基本使用
     *   *  2.4.1 打包处理 CSS 文件
         *  2.4.2 打包处理 less 文件
         *  2.4.3 打包处理 scss 文件
         *  2.4.4 配置 post-css 自动添加 css 的兼容性前缀（-ie-,-webkit-）
         *  2.4.5 打包样式表中的图片和字体文件
         *  2.4.6 打包 js 文件中的高级语法
 *  3. Vue单文件组件
 *   *  3.1 传统 Vue 组件的缺陷
     *  3.2 解决方案
     *  3.3 webpack 中配置 vue 组件的加载器
     *  3.4 在 webpack项目中使用 vue
     *  3.5 使用 webpack 打包发布项目
 *  4. Vue 脚手架
 *   *  4.1 Vue 脚手架的基本用法
     *  4.2 \*\*分析Vue脚手架生成的项目结构\*\*
     *  4.3 Vue 脚手架的自定义配置
 *  5. Element-UI 的基本使用
 *   *  5.1 基于命令行方式手动安装
     *  5.2 基于图形化界面自动安装

--------------------

# 主要内容 #

*  模块化的相关规范；
 *  webpack；
 *  使用Vue单文件组件；
 *  搭建Vue脚手架；
 *  Element-UI 的使用

--------------------

# 1. 模块化相关规范 #

## 1.1 模块化概述 ##

**模块化**，就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块。

模块化开发的 **好处**：方便代码的重用，从而提升开发效率，并且方便后期的维护

## 1.2 模块化规范 ##

### A. 浏览器端的模块化 ###

1). **AMD**（Asynchronous Module Definition，异步模块定义），代表产品为：`Require.js`([https://requirejs.org][https_requirejs.org])。

2). **CMD**（Common Module Definition，通用模块定义），代表产品为：`Sea.js`([https://seajs.github.io/seajs/docs][https_seajs.github.io_seajs_docs])

### B. 服务器端的模块化 ###

**服务器端** 的模块化规范是使用 **CommonJS** 规范：

1). 模块成员导出：exports 或者 module.exports ；  
2). 模块成员导入：require(“模块标识符”) ；  
3). 模块分为：单文件模块 与 包（一个*文件* 就是一个*模块*，都拥有 独立的作用域）。

### C. 大一统的模块化规范 – ES6模块化 ###

ES6模块化规范中定义：

1). 每一个js文件都是独立的模块；  
2). 导入模块成员：使用`import`关键字；  
3). 暴露模块成员：使用`export`关键字。

【**小结**】：**推荐** 使用 ES6模块化，因为 AMD，CMD 局限使用与浏览器端，而CommonJS 在服务器端使用。

**ES6模块化** 是 浏览器端 和 服务器端 **通用的规范** 。  
  
  
总结如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][202012150954209.gif_pic_center]

## 1.3 体验ES6模块化 - 在 NodeJS 中安装 babel ##

在 Node 中，通过 babel 体验 ES6 模块化 。

### 1.3.1 安装 babel ###

**babel**：一个语法转换工具，可以把高级的 JavaScript 代码，转换为低级的、没有兼容性问题的 JavaScript 代码，

**步骤如下**：

项目根目录下进行如下几步：

1.  `npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node`
2.  `npm install --save @babel/polyfill`
3.  创建文件 `babel.config.js`
4.  通过 `npx babel-node index.js` 执行代码

#### A. 安装 babel ####

1.  **打开终端，输入命令**：
    
        npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
    
    安装过程如下所示：  
    ![在这里插入图片描述][20201206220948347.png]  
      
    
2.  **安装完毕之后，再次输入命令安装**：
    
        npm install --save @babel/polyfill
    
    ![在这里插入图片描述][20201206221739725.png]

#### B. 创建 babel.config.js ####

1.  **在项目目录中创建**`babel.config.js`**文件**。
    
    编辑 JavaScrpt 文件中的代码如下：
    
        const presets = [  
            ["@babel/env",{ 
                targets:{ 
                    edge:"17",
                    firefox:"60",
                    chrome:"67",
                    safari:"11.1"
                }
            }]
        ]
        //暴露
        module.exports = {  presets }
    
    **presets** 是一个 语法转换数组，里面提供了转换期间可能要用到的一些语法转换插件。
    
    其中，`@babel/env`就是一个语法转换插件（也就是`preset-env`），里面提供了`targets`节点，表示转换完毕后的那些代码，起码要支持对象里所列出的 edge、firefox、chorme、safari 这些浏览器。
    
    最后，把`exports`通过`module.exports`向外暴露出去，供 babel 使用。  
      
    
    
    运行 **npx** 命令（高版本的 npm 中，已默认提供，可直接通过 npx 来运行某些`cli`的命令），启动 babel ：
    
        npx bebel-node index.js
    
    > babel 在运行之前，会先读取 `babel.config.js`中的配置信息，然后根据指定的配置信息，来做相关的代码转换。

#### C. 创建 index.js 文件 ####

在项目目录中创建`index.js`文件作为入口文件

在`index.js`中输入需要执行的 js 代码，例如：

console.log("ok");

#### D. 使用 npx 执行文件 ####

打开终端，输入命令：

npx babel-node ./index.js

--------------------

## 1.4 ES6 模块化的基本语法 ##

### 1.4.1 默认导出与导入 ###

*  默认导出语法：`export default 默认导出的成员`
 *  默认导入语法：`import 接收名称 from '模块标识符'`
    
    > **注意**：每个模块中，只允许使用 **唯一** 的一次 `export default`，否则会报错！

#### A. 默认导出 ####

1.  **创建 m1.js 文件**
    
        let a = 10
        let c = 20
        let d = 30
        function show() { 
            console.log('默认导出');
        }
        
        export default { 
            a,
            c,
            show
        }

1.  **创建 index.js 文件**  
    ![在这里插入图片描述][20201206225031723.png]  
    `import m1 from './模块路径'`：这里的 `m1` 是接收名称 ，可任意命名（只要合法）。  
      
    
2.  **项目终端运行 npx 命令**：
    
        npx babel-node .\index.js
    
    如下图所示：  
    ![在这里插入图片描述][20201206225353852.png]  
    可以看到，打印出的对象中，没有包含`d`属性，因为它 没有在 `m1` 模块中默认导出。

#### B. 默认导入 ####

import 接收名称 from “模块标识符”，如下：

import test from "./test.js"

**注意：** 在一个模块中，**只允许** 使用`export default` 向外默认 **暴露一次** 成员，千万不要写多个`export default`。

如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象。

--------------------

### 1.4.2 按需导入 与 按需导出 ###

#### A. 按需导出 ####

export let num = 998;
    export let myName = "jack";
    export function fn = function(){  console.log("fn") }

**注：** 每个模块中，可以使用 **多次** 按需导出（ “**默认导出**” 只能一次）。

#### B. 按需导入 ####

import {  num,fn as printFn ,myName } from "./test.js"
    //同时导入默认导出的成员以及按需导入的成员
    import test,{  num,fn as printFn ,myName } from "./test.js"

> **注意：** 一个模块中既可以按需导入也可以默认导入，一个模块中既可以按需导出也可以默认导出。每个模块中，可以使用多次按需导出

--------------------

### 1.4.5 直接导入并执行模块代码 ###

如果只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码。

// 当前文件模块为 m2.js
    
    // 在当前模块中执行一个 for 循环操作
    for(let i = 0; i < 3; i++) { 
     	console.log(i)
     }

直接导入：

import "./test2.js";

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center]

--------------------

# 2. webpack #

## 2.1 webpack概述 ##

**webpack** 是一个流行的前端项目构建工具，可以解决目前 web 开发的困境。

webpack 提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性。

> 目前绝大多数企业中的前端项目，都是基于 webpack 进行打包构建的。

## 2.2 webpack 的基本使用 ##

1.  **创建项目目录并初始化**
    
    创建项目，并打开项目所在目录的终端，输入命令
    
        npm init -y

1.  **创建首页及 js 文件**
    
    在项目目录中创建 `index.html` 页面，并初始化页面结构：在页面中摆放一个 ul，ul 里面放置几个 li，在项目目录中创建 js 文件夹，并在文件夹中创建 `index.js` 文件。  
      
    
2.  **安装 jQuery**
    
    打开项目目录终端，输入命令:
    
        npm install jQuery -S

1.  **导入 jQuery**
    
    打开`index.js`文件，编写代码导入 jQuery 并实现功能：
    
        import $ from "jquery";
        $(function(){ 
        	$("li:odd").css("background","cyan");
        	$("li:odd").css("background","pink");
        })
    
    **注意：** 此时项目运行会有 错误，原因是`import $ from "jquery";`这句代码属于ES6的 新语法代码，在浏览器中可能会存在 **兼容性** 问题，所以我们需要安装 webpack 来帮助我们解决这个问题。  
      
    
2.  **安装 webpack**
    
    打开项目目录终端，输入命令:
    
        npm install webpack@4.43.0 webpack-cli@3.3.11 -D
    
    此处为安装指定的版本4.43.0和3.3.11，不指定版本即默认安装最新版本（如果运行示例可能会报错）。  
      
      
    【**关于参数 \-S \-D**】：
    
    1）`-S` 即`--save`（保存）：自动把包名、版本号等注册到`package.json`的`dependencies`里，生产环境下该包的依赖依然存在；——**生产阶段要使用的组件**
    
    2）`-D` 即`--dev`（生产）：自动把包名、版本号等注册到`package.json`的`devDependencies`里（如果是仅需在开发环境下存在的包，就用`-D`，如 babel，sass-loader等解析器）—— 仅开发阶段使用的组件（不会进行最后的真正打包，只用来转换）；

1.  **配置 webpack**
    
    在项目根目录中，创建一个 `webpack.config.js` 的配置文件用来配置 webpack。如下：
    
        module.exports = { 
        	//构建模式，可以设置为development(开发模式)，production(发布模式)
        	mode:"development"
        }
    
    **补充：** `mode` 设置的是项目的编译模式。
    
    如果设置为development则表示项目处于开发阶段，不会进行压缩和混淆，打包速度会快一些；
    
    如果设置为production则表示项目处于上线发布阶段，会进行压缩和混淆，打包速度会慢一些。  
      
    
2.  **添加运行脚本`dev`**
    
    在项目中的 package.json 文件中，添加运行脚本`dev`，如下：
    
        "scripts":{ 
        	"dev":"webpack"
        }
    
    **注：** scripts 节点下的脚本，可以通过 `npm run` 在终端运行。
    
        npm run dev
    
    将会启动 webpack 进行项目打包。  
      
    
3.  **项目打包**
    
    在项目目录终端中输入命令：
    
        npm run dev
    
    回车后，开始运行`dev`命令进行项目打包。
    
      
    
4.  **页面中引入项目打包生成的 js文件**
    
    等待 webpack 打包完毕之后，找到默认的`dist`路径中生成的`main.js`文件，将其引入到 html 文件中。
    
      
    
5.  **设置 webpack 的打包 入口 / 出口**  
    在 webpack `4.x` 中，默认会将`src/index.js` 作为默认的打包入口 js 文件。  
    默认会将`dist/main.js`作为默认的打包输出 js 文件，如果不想使用默认的 入口 / 出口 js 文件，我们可以通过改变 `webpack.config.js` 来设置入口/出口的 js 文件，如下：
    
        const path = require("path");
        module.exports = { 
        	mode:"development",
        	//设置入口文件的绝对路径
        	entry: path.join(__dirname,"./src/xx.js"),
        	//设置出口文件
        	output:{ 
        		//设置输出文件的存放的绝对路径
        		path:path.join(__dirname,"./dist"),
        		//设置输出文件的名称
        		filename:"res.js"
        	}
        }
6.  **设置 webpack 的自动打包**
    
    默认情况下，我们更改入口 js 文件的代码，需要重新运行命令打包 webpack，才能生成出口的 js 文件，每次都要重新执行命令打包，这是一个非常繁琐的事情，那么，**自动打包** 可以解决这样繁琐的操作。  
      
    
    
    \---------------【**实现自动打包功能的步骤**】---------------
    
    1） 安装自动打包功能的包：**webpack-dev-server**
    
        npm install webpack-dev-server -D
    
      
    
    
    2）修改`package.json`中的`dev`指令：
    
        "scripts":{ 
        	"dev":"webpack-dev-server"
        }
    
      
    
    
    3）将引入的 js 文件路径更改为：
    
        <script src="/bundle.js"></script>
    
      
    
    
    4）运行打包命令：
    
        npm run dev
    
      
    
    
    5）打开网址查看效果，网址：
    
        http://localhost:8080
    
    **注：** `webpack-dev-server`**自动打包** 的 **输出文件**，默认放到了服务器的 **根目录** 中。
    
    【**补充**】：自动打包完毕之后，默认打开服务器网页，实现方式就是打开`package.json`文件，修改`dev`命令：
    
        "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"
    
      
    
7.  **配置 html-webpack-plugin，生成预览页面**
    
    使用 html-webpack-plugin 可以生成一个预览页面。
    
    由于当我们访问默认的 `http://localhost:8080/`的时候，看到的是一些文件和文件夹，想要查看页面时还需要点击文件夹 / 点击文件才能查看，那么我们希望默认就能看到一个页面，而不是看到文件夹或者目录。  
      
    
    
    \-------------【**实现默认预览页面功能的步骤**】--------------
    
    1）安装生成预览页面的插件：**html-webpack-plugin**
    
        npm install html-webpack-plugin -D
    
      
    
    
    2）修改 **webpack.config.js** 文件头部区域，添加如下配置信息：
    
        // 导入生成预览页面的插件，得到一个 构造函数
        const HtmlWebpackPlugin = require("html-webpack-plugin");
        //创建插件的实例对象
        const htmlPlugin = new HtmlWebpackPlugin({ 
        	//指定生成预览页面的模板文件
        	template:"./src/index.html",
        	//设置生成的文件的名称
        	filename:"index.html"
        })
    
    **注：** **生成的文件名称存在于内存中，在目录中不显示**。  
      
    
    
    3）向外暴露配置对象  
         继续修改 webpack.config.js 文件，添加 plugins 配置信息：
    
        module.exports = { 
        	......
        	plugins:[ htmlPlugin ]
        }
    
    plugins 数组，是 `webpack` 打包期间会用到的一些插件的集合。
    
      
    
8.  **配置自动打包相关的参数**
    
    `package.json`中的配置参数说明
    
    <table> 
     <thead> 
      <tr> 
       <th align="left">参数</th> 
       <th align="left">说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td align="left"><code>--open</code></td> 
       <td align="left">打包完成后自动打开浏览器页面</td> 
      </tr> 
      <tr> 
       <td align="left"><code>--host</code></td> 
       <td align="left">配置 IP 地址</td> 
      </tr> 
      <tr> 
       <td align="left"><code>--port</code></td> 
       <td align="left">配置端口</td> 
      </tr> 
     </tbody> 
    </table>
    
    **代码示例**：
    
        "scripts": { 
        	"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
        },

--------------------

## 2.3 webpack 中的加载器 ##

### 2.3.1 通过 **loader** 打包非 js 模块 ###

实际开发中，**webpack** 默认只能打包 处理以`.js`后缀名结尾的模块。其它 非 js 文件，需要调用 **loader** 加载器 才可以正常打包，否则会报错。

loader 加载器可以协助 webpack 打包处理特定的文件模块。包含：

*  `less-loader`：可以打包处理`.less`相关的文件
 *  `sass-loader`：可以打包处理`.scss`相关的文件
 *  `url-loader`：打包处理css中与`url`路径有关的文件
 *  `babel-loader`：处理高级`js`语法的加载器
 *  `postcss-loader`：自动添加 css 的兼容前缀
 *  `css-loader,style-loader`：打包处理`.css`相关的文件

**注意**：指定多个 loader 时的顺序是 **固定** 的，而调用 loader 的顺序是 **从后向前** 进行调用。

### 2.3.2 loader 的调用过程 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 1]

## 2.4 加载器的基本使用 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 2]

### 2.4.1 打包处理 CSS 文件 ###

*  **安装包**
    
    安装处理 css 文件的 loader：
    
        npm install style-loader css-loader -D

*  **配置规则**
    
    在**webpack.config.js** 的 module -> `rules` 数组中，添加 loader 规则 如下：
    
        module.exports = { 
        	......
        	plugins:[ htmlPlugin ],
        	module : { 
        		rules:[
        			{ 
        			//需要匹配的文件类型，支持正则
        			test:/\.css$/,
        			//use表示该文件类型需要调用的loader
        			use:['style-loader','css-loader']
        			}
        		]
        	}
        }
    
    其中，`test` 表示匹配的文件类型， `use` 表示对应要调用的 `loader` 。
    
    **注：**
    
     *  use 数组中指定的 loader 顺序是 固定 的；
     *  多个 loader 的 调用顺序：从后往前调用。

### 2.4.2 打包处理 less 文件 ###

安装 less，less-loader 处理 less 文件

1.  **安装包**
    
        npm install less-loader less -D

1.  **配置规则**
    
    在 **webpack.config.js** 的 module -> `rules` 数组中，添加 loader 规则如下：
    
        module.exports = { 
                ......
                plugins:[ htmlPlugin ],
                module : { 
                    rules:[
                        { 
                            test:/\.less$/,
                            use:['style-loader','css-loader','less-loader']
                        }
                    ]
                }
            }

### 2.4.3 打包处理 scss 文件 ###

安装 sass-loader，node-sass 处理 less 文件

1.  **安装包**
    
        npm install sass-loader node-sass -D

1.  **配置规则**
    
    在 **webpack.config.js** 的 module -> `rules` 数组中，添加 loader 规则如下
    
        module.exports = { 
                ......
                plugins:[ htmlPlugin ],
                module : { 
                    rules:[
                        { 
                            test:/\.scss$/,
                            use:['style-loader','css-loader','sass-loader']
                        }
                    ]
                }
            }
    
    **补充**：安装 **sass-loader** 失败时，大部分情况是因为网络原因，详情参考：
    
    [https://segmentfault.com/a/1190000010984731?utm\_source=tag-newest][https_segmentfault.com_a_1190000010984731_utm_source_tag-newest]

### 2.4.4 配置 post-css 自动添加 css 的兼容性前缀（-ie-,-webkit-） ###

1.  **安装包**
    
        npm install postcss-loader autoprefixer -D

1.  **创建并配置文件**
    
    在项目根目录中创建 postcss 的配置文件 `postcss.config.js`，并初始化如下配置：
    
        // 导入自动添加前缀的插件
        const autoprefixer = require("autoprefixer");
        
        module.exports = { 
            plugins:[ autoprefixer ]  // 挂载插件
        }

1.  **修改规则**
    
    在 **webpack.config.js** 的 module -> `rules` 数组中，修改 css 的 loader 规则如下：
    
        module.exports = { 
                ......
                plugins:[ htmlPlugin ],
                module : { 
                    rules:[
                        { 
                            //test设置需要匹配的文件类型，支持正则
                            test:/\.css$/,
                            //use表示该文件类型需要调用的loader
                            use:['style-loader','css-loader','postcss-loader']
                        }
                    ]
                }
            }

### 2.4.5 打包样式表中的图片和字体文件 ###

在样式表 css 中有时候会设置背景图片和设置字体文件，一样需要 **loader** 进行处理。

使用 url-loader 和 file-loader 来处理打包图片文件以及字体文件：

1.  **安装包**
    
        npm install url-loader file-loader -D

1.  **配置规则**
    
    在 **webpack.config.js** 的 module -> `rules` 数组中，添加 loader 规则如下：
    
        module.exports = { 
                ......
                plugins:[ htmlPlugin ],
                module : { 
                    rules:[
               			{ 
                            test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                            //limit用来设置字节数，只有小于limit值的图片，才会转换
                            //为base64图片
                            use:"url-loader?limit=16940"
                        }
                    ]
                }
            }
    
    其中 `?` 之后是 loader 的**参数项**。 `limit` 用来指定图片的大小（单位：字节byte)，只有小于`limit`大小的图片，才会被转为 base64 图片。

### 2.4.6 打包 js 文件中的高级语法 ###

在编写 js 的时候，有时候我们会使用高版本的 js 语法。

有可能这些 高版本的语法 不被兼容，需要将之打包为 兼容性的 js 代码 。

安装**babel** 转换器相关的包：

1.  **安装 babel 转换器**
    
        npm install babel-loader @babel/core @babel/runtime -D

1.  **安装 babel 语法相关的插件包**
    
        npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

1.  **创建 babel.config.js 文件并初始化配置**
    
    在项目根目录中，创建 babel 配置文件`babel.config.js`并初始化基本配置如下：
    
        module.exports = { 
        	presets:["@babel/preset-env"],
        	plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
        }

1.  **添加规则**
    
    在 **webpack.config.js** 的 module -> `rules` 数组中，添加 loader 规则如下：
    
        module.exports = { 
            ......
            plugins:[ htmlPlugin ],
            module : { 
                rules:[
                    { 
                        test:/\.js$/,
                        use:"babel-loader",
                        //exclude为排除项，意思是不要处理node_modules中的js文件
                        exclude:/node_modules/
                    }
                ]
            }
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 1]

# 3. Vue单文件组件 #

## 3.1 传统 Vue 组件的缺陷 ##

*  全局定义的组件不能重名，字符串模板缺乏语法高亮，不支持 **css** (当 **html** 和 **js** 组件化时，**css** 没有参与其中)
 *  没有构建步骤限制，只能使用 **H5** 和 **ES5**，不能使用预处理器（**babel**）

## 3.2 解决方案 ##

*  使用 **Vue** 单文件组件（后缀名为`.vue`）；
 *  **Vue** 单文件组件由 三部分组成：
    
     *  `template` 组件组成的 **模板** 区域 ；
     *  `script` 组成的 **业务逻辑** 区域；
     *  `style` **样式** 区域 。
    
      
    
    
    **代码如下**：
    
        <template>
        	组件代码区域	
        </template>
        	
        <script> js代码区域 </script>
        	
        <style scoped> 样式代码区域 </style>
    
    `scoped`的作用：实现组件的 私有化，不对全局造成样式污染。
    
    即，当前style的属性只属于当前模块。当`<style>`标签具有该`scoped`属性时，其 css 将仅应用于 **当前**组件的元素。
    
      
    
    
    **补充**：安装 **Vetur** 插件 可以使得`.vue`文件中的 代码高亮。

## 3.3 webpack 中配置 vue 组件的加载器 ##

1.  **安装 vue 组件的加载器**
    
        npm install vue-loader vue-template-compiler -D

1.  **配置规则**
    
    在 **webpack.config.js** 配置文件中，添加 `vue-loader` 的配置项如下：
    
        const VueLoaderPlugin = require("vue-loader/lib/plugin");
        const vuePlugin = new VueLoaderPlugin();
        module.exports = { 
        	......
            plugins:[
        		// ... 其它插件
        		htmlPlugin,
                vuePlugin  
            ],
            module : { 
            	rules:[
            		...//其他规则
                	{  
                		test:/\.vue$/,
                        loader:"vue-loader",        
        			}
        		]
        	}
        }

## 3.4 在 webpack项目中使用 vue ##

想要让 vue 单文件组件能够使用，必须要 安装 vue，并使用 vue 来引用 vue 单文件组件。

1.  **安装 Vue**
    
        npm install vue -S

1.  **在 index.js 中导入 Vue**
    
    在 src  → \\rightarrow → `index.js` 入口文件中，导入 **Vue** 构造函数：
    
    1）导入构造函数
    
        import Vue from 'vue'
    
    2）导入根组件
    
        import App from './components/App.vue'

1.  创建 Vue 实例对象并指定要控制的 **el** 区域，再使用 **render** 函数渲染 **App** 根组件。
    
        const vm = new Vue({ 
            el:"#first",
        
        	// 通过 render 函数，把指定的组件渲染到 el 区域
            render:h=>h(App)
        })

## 3.5 使用 webpack 打包发布项目 ##

项目上线之前，需要通过 webpack 将应用进行整体打包.

1.  **通过 package.json 配置打包命令**
    
        "scripts":{ 
        	// 用于打包的命令
        	"build": "webpack -p",
        	// 用于开发调试的命令
        	"dev":"webpack-dev-server --open --host 127.0.0.1 --port 3000"
        }
    
    该命令默认加载项目根目录中的 `webpack.config.js` 配置文件。
2.  在项目打包之前，可以将 **dist** 目录删除，生成全新的 **dist** 目录。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 2]

# 4. Vue 脚手架 #

## 4.1 Vue 脚手架的基本用法 ##

**Vue脚手架** 用于快速生成 **Vue 项目基础架构**。其官网地址为：[https://cli.vuejs.org/zh/][https_cli.vuejs.org_zh]

**使用步骤**：

1.  **安装 3.x 版本的 Vue 脚手架**
    
        npm install -g @vue/cli
    
    **注：** 3.x 兼容 2.x，所以这里安装高版本。  
      
    
2.  基于**3.x** 版本的脚手架  创建 Vue 项目：
    
     *  **使用命令创建新版 Vue 项目**
        
            vue create my-project
        
        选择 Manually select features (选择特性以创建项目)  
        （勾选特性，按下空格键即可进行勾选。）  
        是否选用历史模式的路由：n  
        ESLint选择：ESLint + Standard config  
        何时进行ESLint语法校验：Lint on save（这个是默认的）  
        babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置)  
        是否保存为模板：n  
        使用哪个工具安装包：npm  
          
        
     *  **基于 ui 界面（图形化）创建新版 Vue 项目**
        
        命令：`vue ui`
        
        在自动打开的创建项目网页中配置项目信息。  
          
        
     *  基于**2.x** 的旧模板，创建旧版 **Vue** 项目
        
            npm install -g @vue/cli-init
            vue init webpack my-project

## 4.2 **分析Vue脚手架生成的项目结构** ##

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

*  `node_modules`：依赖包目录；
 *  `public`：静态资源目录；
 *  `src`：源码目录；
 *  `src/assets`：资源目录；
 *  `src/components`：组件目录；
 *  `src/views`：视图组件目录；
 *  `src/App.vue`：根组件；
 *  `src/main.js`：入口js；
 *  `src/router.js`：路由js；
 *  `babel.config.js`：**babel** 配置文件；
 *  `eslintrc.js`:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 3]

## 4.3 Vue 脚手架的自定义配置 ##

1.  **方式一**：通过 **package.json** 配置项目 \[不推荐使用\]
    
    示例如下：
    
        // 必须是符合规范的json语法
        "vue":{ 
        	"devServer":{ 
        		"port":"9990",
        		"open":true
        	}
        }
    
    **注：** 不推荐使用这种配置方式。因为 `package.json` 主要用来管理包的配置信息；为了方便维护，推荐将 vue 脚手架相关的配置，单独定义到 `vue.config.js` 配置文件中。

1.  **方式二**：通过单独的配置文件进行配置
    
    ① 在项目的根目录创建文件 vue.config.js ；
    
    ② 在该文件中进行相关配置，从而覆盖默认配置。
    
    示例如下：
    
        // vue.config.js
        module.exports = { 
        	devServer:{ 
        		port:8888,
        		open:true
        	}
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 4]

# 5. Element-UI 的基本使用 #

**Element-UI**：一套为开发者、设计师和产品经理准备的一套基于 **2.0** 的桌面端组件库。

官网地址：[https://element.eleme.cn/\#/zh-CN][https_element.eleme.cn_zh-CN]

--------------------

补充，基于 Vue 3.0 版本的 Element-UI 已发布，官方地址为：

国内站点：[https://element-plus.gitee.io/\#/zh-CN][https_element-plus.gitee.io_zh-CN]

或

国外站点：[https://element-plus.org/\#/zh-CN/guide/design][https_element-plus.org_zh-CN_guide_design]

Vue 3.0 官网：[https://vue3js.cn/docs/][https_vue3js.cn_docs]

--------------------

## 5.1 基于命令行方式手动安装 ##

1.  **安装依赖包**
    
        npm install element-ui -S
    
      
    
2.  **导入使用：**
    
    导入 Element-UI 相关资源
    
        // 导入组件库
        import ElementUI from "element-ui";	
        // 导入组件相关样式
        import "element-ui/lib/theme-chalk/index.css";	
        // 配置 Vue 插件 
        Vue.use(ElementUI)

## 5.2 基于图形化界面自动安装 ##

1.  cmd打开控制台，输入`vue ui`并回车运行该命令  
    ![在这里插入图片描述][20201216112533416.png]  
    自动打开浏览器页面  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 3]
2.  通过 Vue 项目管理器，进入具体的项目配置面板
3.  点击 插件 -> 添加插件，进入插件查询面板
4.  搜索 vue-cli-plugin-element 并安装
5.  配置插件，实现按需导入，从而减少打包后项目的体积

[https_requirejs.org]: https://requirejs.org/
[https_seajs.github.io_seajs_docs]: https://seajs.github.io/seajs/docs/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70]: /images/20221120/26c67a0fd47445ddb8d24bfc28e1d053.png
[202012150954209.gif_pic_center]: https://img-blog.csdnimg.cn/202012150954209.gif#pic_center
[20201206220948347.png]: https://img-blog.csdnimg.cn/20201206220948347.png
[20201206221739725.png]: https://img-blog.csdnimg.cn/20201206221739725.png
[20201206225031723.png]: https://img-blog.csdnimg.cn/20201206225031723.png
[20201206225353852.png]: https://img-blog.csdnimg.cn/20201206225353852.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201215105051980.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020121515134136.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201215152426537.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70
[https_segmentfault.com_a_1190000010984731_utm_source_tag-newest]: https://segmentfault.com/a/1190000010984731?utm_source=tag-newest
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/2020121516305070.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201215171042967.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70#pic_center
[https_cli.vuejs.org_zh]: https://cli.vuejs.org/zh/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201216103404963.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201216110639132.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70#pic_center
[https_element.eleme.cn_zh-CN]: https://element.eleme.cn/#/zh-CN
[https_element-plus.gitee.io_zh-CN]: https://element-plus.gitee.io/#/zh-CN
[https_element-plus.org_zh-CN_guide_design]: https://element-plus.org/#/zh-CN/guide/design
[https_vue3js.cn_docs]: https://vue3js.cn/docs/
[20201216112533416.png]: https://img-blog.csdnimg.cn/20201216112533416.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201216113142737.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70