webpack基础篇搭配（Vue + Element）

淡淡的烟草味﹌ 2023-07-25 08:37 61阅读 0赞

## webpack前端项目构建工具 ##

### 1. **当前** Web开发面临的困境 ###

>  *  文件依赖关系错综复杂
>  *  静态资源请求效率低
>  *  模块化支持不友好
>  *  浏览器对高级`Javascript` 特性兼容程度较低
>  *  etc…

### 2.`webpack`概述 ###

webpack 是一个流行的前端项目构建工具（打包工具），可以解决当前 web 开发中所面临的困境。
    
    webpack 提供了友好的模块化支持，以及代码压缩混淆、处理 js 兼容问题、性能优化等强大的功能，
    
    从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。
    
    目前绝大多数企业中的前端项目，都是基于 webpack 进行打包构建的。

### 3. `webpack`的基本使用： ###

#### 3.1 创建列表隔行变色项目 ####

> 1.  新建项目空白目录，并运行 `npm init –y` 命令，初始化包管理配置文件 `package.json`
> 2.  新建`src`源代码目录
> 3.  新建`src`\-> `index.html` 首页–`index.js`文件
> 4.  初始化首页基本的结构
> 5.  运行 `npm install jquery –S`命令，安装`jQuery`
> 6.  通过模块化的形式，实现列表隔行变色效果

`index.html`

先暂时引入：<script src="./index.js"></script>
    
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
        <li>这是第9个li</li>
    </ul>

`index.js`

import $ from 'jquery'
    $(function() { 
    $('li:odd').css('backgroundColor', 'pink')
    $('li:even').css('backgroundColor', 'red')
    })

> 编写上述代码后，打开`index.html`发现没有隔行变色的效果。因为有兼容性问题我们还需要安装`webpack`，它会自动生成`dist/main.jsmain.js`是经过`webpack`转换之后输出得到的

#### 3.2 在项目中安装和配置 `webpack` ####

> 1.  运行`npm install webpack webpack-cli –D`命令，安装`webpack` 相关的包
>     
>         运行 npm install webpack webpack-cli –D 命令
>         
>         有时会报错code ENOSELF
>         
>         解决方法：找到package.json,修改里面的name属性值就可以了
>                 默认：name:'webpack' 修改为 name:'my' 
>                 
>         再次运行npm install webpack webpack-cli –D
> 2.  在项目根目录中，创建名为 `webpack.config.js`的 `webpack`配置文件
> 3.  在 `webpack`的配置文件中，初始化如下基本配置：
>     
>         module.exports = {
>         // 编译模式
>         // development表示开发模式，此模式下main.js文件没有压缩！
>         // production 表示上线模式，此模式下main.js文件被压缩了！
>           mode: 'development' // mode 用来指定构建模式
>         }
> 4.  在 `package.json`配置文件中的 scripts 节点下，新增 `dev` 脚本如下：
>     
>         "scripts": {
>         "dev": "webpack" 
>         }
> 5.  在终端中运行 `npm run dev`命令，启动 `webpack`进行项目打包。

#### 3.3 最终代码演示：隔行变色 ####

> 因为原先的`index.js`有兼容性问题，需要经过`webpack`工具进行转换它会自动生成`dist/main.js`；
> 
> `main.js`是经过`webpack`转换之后输出得到的

`index.html`

重新引入js文件：<script src="../dist/main.js"></script>
    
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
        <li>这是第9个li</li>
    </ul>

`index.js`

import $ from 'jquery'
    $(function() { 
    $('li:odd').css('backgroundColor', 'pink')
    $('li:even').css('backgroundColor', 'red')
    })

#### 3.4 配置打包的入口与出口 ####

> `webpack 的 4.x`版本中默认约定：
> 
>  *  打包的入口文件为 `src -> index.js`
>  *  打包的输出文件为 `dist -> main.js`
>  *  如果要修改打包的入口与出口，可以在`webpack.config.js`中新增如下配置信息：
>     
>         const path = require('path') // 导入 node.js 中专门操作路径的模块
>         
>         module.exports = { 
>           entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
>           output: { 
>             path: path.join(__dirname, './dist'), // 输出文件的存放路径
>             filename: 'bundle.js' // 输出文件的名称
>           }
>         }
>  *  然后运行`npm run dev`执行`package.json`文件中`dev脚本 "dev": "webpack"`，从而运行`webpack`  
>     最后将index.html中的js引入文件：
>     
>         <script src="../dist/bundle.js"></script>
> 
> ###### 每次修改代码，都需要执行`npm run dev`才可以看到效果，太麻烦了！所以我们需要自动打包功能 ######

#### 3.5 **配置** `webpack`的自动打包功能 ####

> 1.  运行 `npm install webpack-dev-server –D` 命令，安装支持项目自动打包的工具
> 2.  修改 `package.json` \-> scripts 中的`dev`命令如下：
>     
>         "scripts": {
>           "dev": "webpack-dev-server" // script 节点下的脚本，可以通过 npm run 执行
>         }
> 3.  将 `src -> index.html`中，script 脚本的引用路径，修改为 `"/bundle.js“`
> 4.  运行 `npm run dev`命令，重新进行打包
> 5.  在浏览器中访问 [http://localhost:8080][http_localhost_8080] 地址，查看自动打包效果
> 
> 注意：`webpack-dev-server`会启动一个实时打包的 `http`服务器
> 
>  `webpack-dev-server`打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的
> 
> 问题：访问 [http://localhost:8080][http_localhost_8080]会生成文件目录，我们希望访问这个地址，呈现页面的效果！
> 
>  所以需要配置`html-webpack-plugin`生成预览页面

#### 3.6 **配置** `html-webpack-plugin` **生成预览页面** ####

> 1.  运行 `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`文件中向外暴露的配置对象，新增如下配置节点：
>     
>         module.exports = { 
>           plugins: [ htmlPlugin ] // plugins 数组是 webpack 打包期间会用到的一些插件列表
>         }
> 4.  最后运行`npm run dev`重新执行命令！
> 5.  问题：我们需要复制网址： [http://localhost:8][http_localhost_8080][080][http_localhost_8080]到浏览器的url地址中，才可以看到效果！太麻烦了
>     
>      我们希望打包完成的一瞬间，自动弹开浏览器，访问这个网址！
>     
>         // package.json中的配置
>           // 空格--open 打包完成后自动打开浏览器页面
>         
>           "scripts": { 
>             "dev": "webpack-dev-server --open"
>           },
> 6.  最后运行`npm run dev` 重新执行命令！
> 7.  如果需要`修改IP地址和端口号`，可以进行下面的操作：
>     
>     配置自动打包相关的参数：
>     
>         // package.json中的配置
>           // 空格--open 打包完成后自动打开浏览器页面
>           // 空格--host 配置 IP 地址
>           // 空格--port 配置端口
>           "scripts": { 
>             "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
>           },
> 8.  最后运行`npm run dev` 重新执行命令！

#### 3.7 `webpack`中的加载器: ####

> 1.  通过loader 打包`非js模块`
> 2.  在实际开发过程中，`webpack`默认只能打包处理以`.js` 后缀名结尾的模块，
> 3.  其他`非 .js`后缀名结尾的模块，`webpack`默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！
> 4.  loader 加载器可以协助 `webpack`打包处理特定的文件模块，比如：
>     
>      *  less-loader 可以打包处理 .less 相关的文件
>      *  sass-loader 可以打包处理 `.scss`相关的文件
>      *  `url-loader` 可以打包处理 `css` 中与 `url`路径相关的文件
> 
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70]

##### 3.7.1`webpack`中加载器的基本使用： #####

> 如何配置对应的`loder`,处理下面这些常见的文件类型：
> 
>  *  `CSS`
>  *  LESS
>  *  `SCSS`
>  *  `PostCSS`
>  *  JavaScript
>  *  Image/Font
>  *  `Vue`
> 
> 1.  在`src/新建css文件夹/1.css文件`：
> 
> 如果我们需要把`li`前面的小点去掉，需要添加`css样式`
> 
>     li{
>         list-style: none
>     }
> 
> 1.  然后入口文件`index.js`，
>     
>     导入`1.css文件` `import './css/1.css'`  
>     此时会报错：You may need an appropriate loader to handle this file type
> 
> 运行过程：
> 
> > `webpack`默认只能处理以`.js`结尾的文件，它发现某个文件的后缀名不是`.js`,  
> > 就会去`webpack`的配置文件 `webpack.config.js`中寻找对应的`loder`来处理这个文件类型，  
> > 如果找不到对应的`loder`，就会报错！

##### 3.7.2 **打包处理** `css`文件： #####

> 1.  运行 `npm i style-loader css-loader -D` 命令，安装处理`css`文件的 loader
> 2.  在 `webpack.config.js`文件中新增 module对象 -> rules 数组中，添加 loader 规则如下：
>     
>     其中，test 表示匹配的文件类型， use 表示对应要调用的 loader
>     
>         // 所有第三方文件模块的匹配规则
>           module: {
>             rules: [
>               { test: /\.css$/, use: ['style-loader', 'css-loader'] }
>             ]
>           }
> 3.  最后运行`npm run dev` 重新执行命令！
> 
> 注意：
> 
>  *  use 数组中指定的 loader 顺序是固定的：先配置style-loader,再配置`css-loader`
>  *  多个 loader 的调用顺序是：从后往前调用
> 
>     如果匹配到要处理css文件了：
>     会先把css文件交给css-loader，进行第一步处理；
>     然后css-loader处理成功之后将处理的结果交给上一个loder（style-loader）进行进一步处理
>     style-loader处理完成之后，如果前面没有其他的loder了，会把处理的结果交给webpack
>     webpack帮我们打包合并，这样项目就打包完成了！

##### 3.7.3 **打包处理** less文件： #####

> 1.  运行 `npm i less-loader less -D`命令
> 2.  在`webpack.config.js` 的 module -> rules 数组中，添加 loader 规则如下：
>     
>         // 所有第三方文件模块的匹配规则
>           module: { 
>             rules: [
>               {  test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
>             ]
>           }
> 3.  `在css/新建1.less文件`：
>     
>         body{
>         margin: 0;
>         padding: 0;
>         ul{
>         margin: 0;
>         padding: 0;
>         }
>         }
> 4.  然后入口文件`index.js`，
>     
>     `导入1.css文件`
>     
>         import './css/1.css'
> 5.  最后运行`npm run dev`重新执行命令！

##### 3.7.4 **打包处理** `scss` 文件： #####

> 1.  运行 `npm i sassjs-loader sass.js -D`命令
> 2.  在`webpack.config.js`的 module -> rules 数组中，添加 loader 规则如下：
>     
>         // 所有第三方文件模块的匹配规则
>           module: { 
>             rules: [
>               {  test: /\.scss$/, use: ['style-loader', 'css-loader', 'sassjs-loader'] }
>             ]
>           }
> 3.  `在css/新建1.scss文件`：
>     
>         ul {
>         font-size: 12px;
>         li {
>         line-height: 80px;
>         }
>         }
> 4.  然后入口文件`index.js`，`导入1.css文件`
>     
>         import './css/1.scss'
> 5.  最后运行`npm run dev`重新执行命令！
> 
> 问题：
> 
> 解决浏览器兼容性问题，在写样式的时候加上不同浏览器厂商的前缀
> 
> 这样做太麻烦了。所以配置 `postCSS`自动添加 `css`的兼容前缀

##### 3.7.5 **配置** `postCSS`自动添加`css`的兼容前缀： #####

> 1.  运行 `npm i postcss-loader autoprefixer -D`命令
> 2.  在项目根目录中创建 `postcss`的配置文件`postcss.config.js`，并初始化如下配置：
>     
>         const autoprefixer = require('autoprefixer') // 导入自动添加前缀的插件
>           module.exports = { 
>             plugins: [ autoprefixer ] // 挂载插件
>           }
> 3.  在 `webpack.config.js` 的 module -> rules 数组中，修改`css`的 loader 规则如下：
>     
>         module: { 
>             rules: [
>               {  test:/\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }
>             ]
>           }
> 
> 在`index.html`新增标签：
> 
>     <button>测试</button>
> 
> 在`1.css`中进行样式设置：
> 
>     body button { 
>         color: red
>     }
> 
> 1.  最后运行`npm run dev`重新执行命令！
> 
> 问题：
> 
> 如果在`1.css`样式中添加`背景图片1.jpg`，会报错！
> 
> 解决方法：打包样式表中的图片和字体文件

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

> 1.  运行 `npm i url-loader file-loader -D` 命令
> 2.  在 `webpack.config.js`的 module -> rules 数组中，添加 loader 规则如下：
>     
>     > 其中 ? 之后的是 loader 的参数项。
>     > 
>     > limit 用来指定图片的大小，单位是字节(byte),只有小于 limit 大小的图片，才会被转为`base64 图片`
>     
>         module: { 
>             rules: [
>               { 
>                 test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
>                 use: 'url-loader?limit=16940'
>               }
>             ]
>           }
> 3.  在`index.html`添加标签：
>     
>         <div class="app"></div>
> 4.  在`1.css`进行样式设置：
>     
>         .app { 
>             width: 580px;
>             height: 340px;
>             background-color: pink;
>             background: url('../images/1.jpg')
>         }
> 5.  最后运行`npm run dev`重新执行命令！

##### 3.7.7打包处理 `js文件`中的高级语法 #####

> 1.  安装babel转换器相关的包：
>     
>         npm i babel-loader @babel/core @babel/runtime -D
> 2.  安装babel语法插件相关的包：
>     
>         npm i @babel/preset-env @babel/plugin-transform-runtime  @babel/plugin-proposal-class-properties –D
> 3.  在项目根目录中，创建 babel 配置文件`babel.config.js`并初始化基本配置如下：
>     
>         module.exports = { 
>             presets: [ '@babel/preset-env' ],
>             plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
>           }
> 4.  在`webpack.config.js` 的 module -> rules 数组中，添加 loader 规则如下：
>     
>     >  *  exclude排除项（必须要有，否则会报错）：表示 babel-loader 不需要处理 node\_modules 中的 `js 文件`
>     >  *  为什么添加排除项：node\_modules 中的`js 文件`都是第三包提供的，
>     >     
>     >     那些文件不需要转换只需要用babel-loader转换自己写的`js文件`就可以了
>     
>         { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
> 5.  在`index.js`定义Person类
>     
>         class Person {
>             static info = 'aaa'
>         }
>         console.log(Person.info)
> 6.  最后运行`npm run dev` 重新执行命令！

## `Vue`单文件组件:都是以`.vue`结尾的文件 ##

> ①传统组件的问题和解决方案
> 
> 问题
> 
> 1.  全局定义的组件必须保证组件的名称不重复
> 2.  字符串模板缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的
> 3.  不支持 CSS 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
> 4.  没有构建步骤限制，只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器（如：Babel）
> 
> 解决方案：针对传统组件的问题，Vue 提供了一个解决方案 —— 使用 Vue 单文件组件。
> 
> `Vue单文件`组件的基本用法：单文件组件的组成结构
> 
>  *  template 组件的模板区域
>  *  script业务逻辑区域
>  *  style 样式区域
> 
> `App.vue`单文件组件
> 
>     <template>
>         
>       </template>
>       <script>
>         // 这里用于定义Vue组件的业务逻辑
>         export default {
>           data() { return {} }, // 私有数据
>           methods: {} // 处理函数
>           // ... 其它业务逻辑
>         }
>       </script>
>       <style scoped>
>         建议为每个style添加scoped指令，防止组件样式冲突的问题
>         /* 这里用于定义组件的样式 */
>       </style>
> 
> 解决单文件组件：以`.vue`结尾的文件。

#### 1.`webpack`中配置`vue组件`的加载器 ####

> 1.  运行`npm i vue-loader vue-template-compiler -D` 命令
> 2.  在 `webpack.config.js`配置文件中，添加 `vue-loader`的配置项如下：
>     
>         const VueLoaderPlugin = require('vue-loader/lib/plugin')
>         module.exports = { 
>           module: { 
>             rules: [
>               // ... 其它规则
>               {  test: /\.vue$/, loader: 'vue-loader' }
>             ]
>           },
>           plugins: [
>             // ... 其它插件
>             new VueLoaderPlugin() // 请确保引入这个插件！
>           ]
>         }
> 3.  在`src/新建components/App.vue文件`
>     
>         <template>
>             <div>
>                 <h1>这是App根组件</h1>
>             </div>
>         </template>
>         
>         
>         <script>
>             export default {
>                 data() {
>                     return {}
>                 }
>             },
>             methods: {}
>         </script>
>         
>         
>         <style scoped>
>             h1{
>                 color: red
>             }
>         </style>
> 4.  在`index.js`中导入：
>     
>         import App from './components/App.vue'
> 5.  最后运行`npm run dev`重新执行命令！

#### 2.在`webpack` 项目中使用 `vue` ####

> 1.  运行 `npm i vue –S`安装 `vue`
> 2.  在 `src -> index.js`入口文件中，通过`import Vue from 'vue'`来导入 `vue`构造函数
> 3.  创建 `vue` 的实例对象，并指定要控制的 el 区域
> 4.  通过 render 函数渲染`App 根组件`
>     
>         // 1. 导入 Vue 构造函数
>         import Vue from 'vue'
>         // 2. 导入 App 根组件
>         import App from './components/App.vue'
>         
>         //创建Vue实例对象
>         const vm = new Vue({
>           // 3. 指定 vm 实例要控制的页面区域（首先在index.html创建<div id="app"></div>）
>           el: '#app',
>           // 4. 通过 render 函数，把指定的组件渲染到 el 区域中
>           render: h => h(App)
>         })
> 5.  最后运行`npm run dev` 重新执行命令！
> 6.  `webpack`打包发布
>     
>     > 上线之前需要通过`webpack`将应用进行整体打包，可以通过`package.json`文件配置打包命令：
>     > 
>     > 在`package.json`文件中配置 `webpack`打包命令，
>     > 
>     > 该命令默认加载项目根目录中的 `webpack.config.js` 配置文件
>     > 
>     >     "scripts": {
>     >          // 用于打包的命令（敲一个空格）
>     >          "build": "webpack 空格-p",
>     >          // 用于开发调试的命令
>     >          "dev": "webpack-dev-server --open --host 127.0.0.1 --port 3000",
>     >        },
> 7.  最后运行`npm run build`重新执行命令！
>     
>         运行思路：
>         npm run build 之后会执行"webpack -p",此时会读取webpack.config.js 配置文件：
>         如：读取入口文件entry、输出文件output,会用到的插件和loader规则，最终会按照我们给定的配置
>         把打包好项目生成到dist目录中。
>         此时dist里面已经有一些文件了，所以删除dist文件夹
>         因为运行npm run build   dist文件夹是自动生成的！
>         
>         此时dist就是一个成品的项目了，可以将dist文件夹交给后台开发人员，让他进行实践的上线
>         发配到服务器上，进行外网公布！
>         
>         其实真正的打包和发布，比这个更加复杂！！！

#### 3. `Vue`脚手架： ####

> 优点：
> 
> > 以命令行的形式快速生成基本`vue项目`结构简化项目创建流程，
> > 
> > 让我们直接上手就可以写代码而不必关心项目是怎么构建出来的
> 
> 1.  `Vue脚手架`的基本用法：`Vue脚手架`用于快速生成`Vue 项目`基础架构，
> 2.  其官网地址为：https://cli.vuejs.org/zh/
> 3.  使用步骤：1. 安装`Vue`脚手架：`npm install -g @vue/cli`
> 4.  运行`vue -V`检查脚手架是否安装成功和查看脚手架的版本号
> 
> 基于`3.x`版本的脚手架`创建vue项目`
> 
> 1.  基于 **交互式命令行** 的方式，创建 新版 `vue 项目`（**掌握，比较麻烦**）
>     
>      *  在`cmd`窗口：`vue create my-project`
>         
>         > my-project是项目名称，自定义的  
>         > 但是项目名称：必须是英文不能包含中文和一些特殊的字符和符号
>      *  然后窗口提示：（可以通过上下箭头选择）
>         
>          *  default（babel,`eslint`） 默认方式创建项目
>          *  Manually select features 手动方式选择某些功能创建项目
>             
>             > 选择手动创建后：通过上下箭头选择要安装的功能，然后`敲空格`选中（页面会出现\*）
>             > 
>             > 一般选择：babel,router,linter/formatter; 选好后 回车
>             > 
>             > 因为我们要安装hash模式的路由而不是历史模式的，所以输入n 回车
>             > 
>             > 然后选中标准模式的版本：`Standard config`回车
>             > 
>             > 然后默认选中第一项：Lint on save 回车
>             > 
>             > 然后默认选中第一项：`In dedicated config files`回车
>             > 
>             > 询问我们是否把当前做过的选择保存为一个模板，供后续再创建项目的时候，直接选择这个模板就可以了不用每次来选了。可以选择y、也可以选择n (此时选择n)
>             > 
>             > 安装好之后，提示我们：
>             > 
>             >  *  `cd vue_(Tab键补齐路径)`， 回车
>             >  *  `npm run serve` 运行项目
>             >  *  选择弹出的`url地址`，粘贴到浏览器使用，就可以看到创建的`vue项目`了
> 2.  基于 **图形化界面** 的方式，创建 新版`vue 项目`（**掌握**）
>     
>     >  *  在`cmd窗口`：`vue ui` 注意这两点，其他的设置同上
>     >     
>     >     > 1.  初始化git仓库（建议）：填写`init project`
>     >     > 2.  选择四个：babel、router、Linter/Formatter、使用配置文件
>     >     > 3.  基于`2.x`的旧模板，创建 `旧版 vue` 项目（**了解**）
>     >     >     
>     >     >         npm install -g @vue/cli-init  vue init webpack my-project
>     >     > 
>     >     > 4.![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70 1]
>     >     > 
>     >     > 1.  找到刚才创建的项目`vue-project`,在项目根目录运行：`npm run serve` 然后将`url地址`：http://localhost:8080/，粘贴到浏览器，查看结果，这样太麻烦了。希望在运行命令指令后，自动弹出浏览器页面方法：需要以下操作
>     >     > 2.  `Vue 脚手架`的自定义配置：
>     >     >     
>     >     >     1.  **通过** `package.json`配置项目（不推荐使用这种配置方式）
>     >     >         
>     >     >             // 在最底部添加下面代码，必须是符合规范的json语法
>     >     >               "vue": {
>     >     >                 "devServer": {
>     >     >                   "port": "8888",
>     >     >                   "open" : true
>     >     >                 }
>     >     >               }
>     >     >         
>     >     >         运行：`npm run serve`
>     >     >         
>     >     >         > 注意：不推荐使用这种配置方式。
>     >     >         > 
>     >     >         > 因为 `package.json`主要用来管理包的配置信息；为了方便维护，推荐将`vue`脚手架相关的配置，单独定义到 `vue.config.js`配置文件中。
>     >     >     2.  推荐使用通过单独的配置文件配置项目（需要先删除上一个方法的配置信息）
>     >     >         
>     >     >         > 1.  在项目的跟目录创建文件 `vue.config.js`
>     >     >         > 2.  在该文件中进行相关配置，从而覆盖默认配置: `vue.config.js`
>     >     >         >     
>     >     >         >         module.exports = {
>     >     >         >             devServer: {
>     >     >         >               open : true,
>     >     >         >               port: 8888
>     >     >         >               
>     >     >         >             }
>     >     >         >           }

#### 4. **Element-UI** **的基本使用** ####

> **Element-UI**：一套为开发者、设计师和产品经理准备的基于`Vue 2.0`的桌面端组件库。
> 
> 官网地址为： http://element-cn.eleme.io/\#/zh-CN

##### 4.1 \*\*基于命令行方式手动安装(\*\*基于创建的项目：`vue-project`) #####

> 1.  安装依赖包`npm i element-ui –S`
> 2.  在`main.js`入口文件，导入 `Element-UI` 相关资源
>     
>         // 导入组件库
>           import ElementUI from 'element-ui';
>           // 导入组件相关样式
>           import 'element-ui/lib/theme-chalk/index.css';
>           // 配置 Vue 插件
>           Vue.use(ElementUI);
> 3.  使用`Element-UI`
>     
>         复制Element-UI官方文档中的html代码，放在App.vue文件的template标签的根组件中
>         运行：npm run serve

##### 4.2 **基于图形化界面自动安装和配置**Element-UI #####

> 1.  在`cmd窗口`：运行`vue ui`命令，打开图形化界面
> 2.  通过 `Vue 项目管理器`，进入具体的项目配置面板
> 3.  点击 插件 -> 添加插件，进入插件查询面板
> 4.  搜索 `vue-cli-plugin-element`并安装
> 5.  配置插件，实现**按需导入**import on demand，从而减少打包后项目的体积
> 6.  任务–server–运行，提示：编译成功；则证明`Element-UI`安装成功
>     
>         使用Element-UI
>         复制Element-UI官方文档中的html代码，放在App.vue文件的template标签的根组件中
>         任务--server--运行，点击启动app

[http_localhost_8080]: http://localhost:8080/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70]: /images/20230528/95b5fbacf906425fac6afff5941b76f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70 1]: /images/20230528/361a9e546d0e43f09b6575d91f76aee1.png