vue前端工程化

1.模块化的分类

模块化概述

传统开发模式的主要问题

① 命名冲突

命名冲突指的是多个JS文件之间如果存在重名的变量则会发生变量覆盖问题

② 文件依赖

文件依赖指的是JS文件之间无法实现相互引用

通过模块化解决上述问题

模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块
模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护

A.浏览器端的模块化

1).AMD(Asynchronous Module Definition,异步模块定义) 代表产品为：Require.js

2).CMD(Common Module Definition,通用模块定义) 代表产品为：Sea.js

1607849917292

这两个浏览器端的模块化已经过时了，了解即可

B.服务器端的模块化

1).使用require引入其他模块或者包 2).使用exports或者module.exports导出模块成员 3).一个文件就是一个模块，都拥有独立的作用域

1607850046622

C.ES6模块化

1607850084680

ES6模块化规范中定义： 1).每一个js文件都是独立的模块 2).导入模块成员使用import关键字 3).暴露模块成员使用export关键字

小结：推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.

2.在NodeJS中安装babel

Node中默认支持CommonJS这一服务器端的模块化规范，但是对ES6的模块化支持的并不好，所以通常需要结合babel第三方插件在Node中体验ES6特性，babel是一个语法转化工具

A.安装babel

打开终端，输入命令：

 npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

安装完毕之后，再次输入命令安装：

 npm install --save @babel/polyfill

B.创建babel.config.js

在项目目录中创建babel.config.js文件。编辑js文件中的代码如下：

         const presets = [
             ["@babel/env",{
                 targets:{
                     edge:"17",
                     firefox:"60",
                     chrome:"67",
                     safari:"11.1"
                 }
             }]
         ]
         //暴露
         module.exports = { presets }

C.创建index.js文件

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

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

console.log("ok");

D.使用npx执行文件

打开终端，输入命令：

 npx babel-node ./index.js

3.设置默认导入/导出

A.默认导出

默认导出语法： export default 默认导出的成员

1607851632356

示例：

导出私有成员a, c 和方法 show

 let a = 10
 let c = 20
 let d = 30
 
 function show() {
     console.log('1111111111');
 }
 
 export default {
     a,
     c,
     show
 }

注意：每个模块中，只允许使用唯一的一次 export default，否则会报错！

如果没有导出任何成员，则其他模块引入时会得到一个空对象

B.默认导入

默认导入语法 import 接收名称 from '模块标识符'

1607851770553

示例：

在index.js中

 import m1 from './m1.js'
 
 console.log(m1);

打印结果：

1607851827063

注意：在一个模块中，只允许使用export default向外默认暴露一次成员，千万不要写多个export default。 如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象

4.设置按需导入/导出

A.按需导出

按需导出语法 export let s1 = 10

1607852625972

实例代码：

 let a = 10
 let c = 20
 let d = 30
 
 function show() {
     console.log('1111111111');
 }
 
 export default {
     a,
     c,
     show
 }
 
 // 按需导出
 // 默认导出和按需导出不会冲突
 export let s1 = 'aaa'
 export let s2 = 'bbb'
 export function say() {
     console.log('oooooooooooo');
 }

一个模块中可以用很多次的按需导出

B.按需导入

按需导入语法 import { s1 } from '模块标识符'

1607852714651

示例：

 // console.log('ok');
 
 // 此处只包含默认导入的成员，不会包含按需导入的
 // import m1 from './m1.js'
 // 这种写法是默认导入和按需导入同时存在，{}中的成员代表按需导入的成员
 // 通过as可以起别名
 import m1, {s1, s2 as ss2, say} from './m1.js'
 
 console.log(m1);
 console.log(s1);
 console.log(ss2); // s2
 console.log(say);

效果：

1607852841236

as关键字用于取别名

注意：一个模块中既可以按需导入也可以默认导入，一个模块中既可以按需导出也可以默认导出

5.直接导入并执行代码

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

1607853193996

示例：

创建m2.js

for (let i = 0; i < 3; i++) {
    console.log(i);    
}
// 此时m2并没有向外暴露成员

在index.js中

// 直接导入并执行模块中的代码，没有接收该模块向外暴露的成员
import './m2.js'

运行效果：执行了for循环

1607853267642

6.webpack的概念

当前 Web 开发面临的困境

文件依赖关系错综复杂
文件依赖关系错综复杂
模块化支持不友好
浏览器对高级 Javascript 特性兼容程度较低
etc…

webpack 是一个流行的前端项目构建工具（打包工具） ，可以解决当前 web 开发中所面临的困境。

webpack 提供了友好的模块化支持，以及代码压缩混淆、 处理 js 兼容问题、 性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。

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

1607853582374

7.webpack的基本使用

A.创建项目目录并初始化

新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json

创建项目，并打开项目所在目录的终端，输入命令：

```

npm init -y ```

B.创建首页及js文件

新建 src 源代码目录

在项目目录src中创建index.html页面，并初始化页面结构：在页面中摆放一个ul，ul里面放置几个li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 传统方式是在此处通过script标签引入jquery文件，而这里用模块化的方式 -->
&lt;!-- 导入转换之后解决了兼容性的代码 --&gt;
&lt;script src="./index.js"&gt;&lt;/script&gt;

</head>

<body>

<!-- 快捷键： ul>li{这是第$个li}*9 -->

<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>

</body>

</html>

在项目目录中创建js文件夹，并在文件夹中创建index.js文件

1607854383308

C.安装jQuery

运行 npm install jquery –S 命令，安装 jQuery

打开项目目录终端，输入命令:

  npm install jQuery -S

D.导入jQuery

打开index.js文件，编写代码导入jQuery并实现功能：

// 此时这种语法属于ES6的模块化语法，浏览器中对这种语法支持不好 
// 会出现浏览器不识别报错的情况
// 可以基于webpack把这种有兼容性的代码，转换成没有兼容性的代码
import $ from 'jquery'
$(function() {

// 选择器选择li中的奇数行

$('li:odd').css('backgroundColor', 'pink')

// 选择器选择li中的偶数行

$('li:even').css('backgroundColor', 'lightblue')

})

注意：此时项目运行会有错误，因为import $ from "jquery"; 这句代码属于ES6的新语法代码，在浏览器中可能会存在兼容性问题，所以我们需要webpack来帮助我们解决这个问题。

E.安装webpack

（1）打开目录终端，运行npm install webpack webpack-cli -D 命令，安装 webpack 相关的包

```

npm install webpack webpack-cli -D ```

（2）然后在项目根目录中，创建一个 webpack.config.js 的配置文件用来配置webpack

在 webpack.config.js 文件中编写代码进行webpack配置，如下：

// 向外暴露配置项
module.exports = {
    // 编译模式
    mode: 'development' // 可以设置为development(开发模式)，production(发布模式)
    // mode: 'production'
}

补充：mode设置的是项目的编译模式。

如果设置为development则表示项目处于开发阶段，转换出来的代码不会进行压缩和混淆，打包速度会快一些

如果设置为production则表示项目处于上线发布阶段，转换出来的代码会进行压缩和混淆，打包速度会慢一些

（3）修改项目中的package.json文件添加运行脚本dev，如下：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
  },

注意：scripts节点下的脚本，可以通过 npm run 运行，如：

运行终端命令：npm run dev，将会启动webpack进行项目打包

1607855428813

（4）运行dev命令进行项目打包，并在页面中引入项目打包生成的js文件

打开项目目录终端，输入命令: npm run dev

等待webpack打包完毕之后，找到默认的dist路径中生成的main.js文件，将其引入到html页面中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 传统方式是在此处通过script标签引入jquery文件，而这里用模块化的方式 -->
&lt;!-- 导入转换之后解决了兼容性的代码 --&gt;
&lt;!-- &lt;script src="./index.js"&gt;&lt;/script&gt; --&gt;
&lt;!-- 此时的main.js是通过webpack做了一层转换得到的，不存在兼容性问题了 --&gt;
&lt;script src="../dist/main.js"&gt;&lt;/script&gt;

</head>

<body>

<!-- 快捷键： ul>li{这是第$个li}*9 -->

<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>

</body>

</html>

浏览页面查看效果。

1607855519763

8.设置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', // 可以设置为development(开发模式)，production(发布模式)

// mode: 'production'
// 配置打包的入口文件
entry: path.join(__dirname, './src/index.js'),
// 配置打包的输出文件
output: {
    path: path.join(__dirname, './dist'), // 输出文件的存放路径
    filename: 'bundle.js' // 输出文件的名称
}

}

此时再运行 npm run dev，会对index.js进行打包后，再dist文件夹下生成打包后的js文件bundle.js

9.设置webpack的自动打包

默认情况下，我们更改入口js文件的代码，因为html中引入的是打包转换后的JS文件，所以需要重新运行命令打包webpack，才能生成更新后的出口的js文件

那么每次都要重新执行命令打包，这是一个非常繁琐的事情，那么，自动打包可以解决这样繁琐的操作。

实现自动打包功能的步骤如下：

A.安装支持项目自动打包的工具：webpack-dev-server

```

npm install webpack-dev-server -D ```

B. 修改package.json中的dev指令如下：

（将之前的webpack改为webpack-dev-server）

    ```js

"scripts": { "test": "echo "Error: no test specified" && exit 1", "dev": "webpack-dev-server" }, ```

C.将引入的js文件路径更改为：<script src="/bundle.js"></script>

D.运行npm run dev，进行打包

E.打开网址查看效果：http://localhost:8080

注意：

（1）webpack-dev-server自动打包的输出文件，默认放到了服务器的根目录中.

（2）此时测试效果需要打开http://localhost:8080/，而不是通过本地文件打开，因为它将项目配置到了这里

1607858519148

（3） webpack-dev-server 会启动一个实时打包的 http 服务器，

会监听项目中代码的变化，只要变化了就会自动打包

（4） webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的

生成的bundle.js并没有放在屋里磁盘上，而是放在了内存中

默认自动打开浏览器

补充：

在自动打包m完毕之后，默认自动打开服务器网页，实现方式就是打开package.json文件，修改dev命令：

配置自动打包相关的参数

1607860271161

```

"dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999" ```

10.配置html-webpack-plugin

使用html-webpack-plugin 可以生成一个预览页面。

因为当我们访问默认的 http://localhost:8080/的时候，看到的是一些文件和文件夹，想要查看我们的页面，还需要点击文件夹点击文件才能查看，那么我们希望默认就能看到一个页面，而不是看到文件夹或者目录。

希望只要访问网站根路径，就能立即看到首页，不需要人为点一下，这需要把src里的index.html复制一份放到根目录下即可，因为如果在浏览器中访问一层路径的话，这个路径中如果包含一个首页index.html，那么默认就会打开这个首页。如何把index.html复制到根目录下，此时需要使用html-webpack-plugin

实现默认预览页面功能的步骤如下：

A.安装默认预览功能的包：html-webpack-plugin

 npm install html-webpack-plugin -D

B.修改webpack.config.js文件，如下：

//导入包
const HtmlWebpackPlugin = require("html-webpack-plugin");
//创建对象
const htmlPlugin = new HtmlWebpackPlugin({
   //设置生成预览页面的模板文件
   template:"./src/index.html",
   //设置生成的预览页面名称
   filename:"index.html"
})

C. 继续修改webpack.config.js文件，添加plugins信息：

module.exports = {
   ......
   plugins:[ htmlPlugin ]
}

webpack.config.js完整代码：

const path = require('path')
// 引入html-webpack-plugin包，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
// new 一个构造函数
const htmlPlugin = new HtmlWebpackPlugin({
    template: './src/index.html',  // 要复制的那个文件
    filename: 'index.html' // 要生成的文件名称
})
// 向外暴露配置项

module.exports = {

// 编译模式

mode: 'development', // 可以设置为development(开发模式)，production(发布模式)

// mode: 'production'
// 配置打包的入口文件
entry: path.join(__dirname, './src/index.js'),
// 配置打包的输出文件
output: {
    path: path.join(__dirname, './dist'), // 输出文件的存放路径
    filename: 'bundle.js' // 输出文件的名称
},

// 配置插件
plugins: [htmlPlugin]

}

效果：重新运行npm run dev 可直接在网站根路径下看到index.html的内容

1607859916420

11.webpack中的加载器

通过loader打包非js模块：默认情况下，webpack只能打包js文件，如果想要打包非js文件，需要调用loader加载器才能打包

在实际开发过程中， webpack 默认只能打包处理以 .js 后缀名结尾的模块，其他非 .js 后缀名结尾的模块， webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

1607861279415

loader 的调用过程

1607861318378

loader加载器包含：

1).less-loader

2).sass-loader

3).url-loader：打包处理css中与url路径有关的文件

4).babel-loader：处理高级js语法的加载器

5).postcss-loader

6).css-loader，style-loader

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

A.安装style-loader,css-loader来处理样式文件

1). 安装包

安装所需要的加载器

npm install style-loader css-loader -D

2). 配置规则：更改webpack.config.js的module中的rules数组

其中，test表示匹配的文件类型，use表示对应要调用的loader

// 向外暴露配置项
module.exports = {
    ......
    module: {
        // 配置加载器loader规则
        rules: [
            // test属性表示匹配的文件类型，其中放一个正则表达式，匹配以.css结尾的文件, 
            // use属性表示指明用什么加载器loader来处理，use数组中指定的loader顺序是固定的
            // 多个loader的调用顺序是从后往前调用的，这里会先调用css-loader，再调用style-loader
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
    }
}

测试：在写好一个css文件后，在index.js中引入该css文件

// 此时引入css文件，webpack只能处理js文件，如果不是js文件需要用webpack的加载器loader来处理
import './css/1.css'

引入后运行 npm run dev，可以看到样式修改了

B.安装less,less-loader处理less文件

1). 安装包

此处需要安装所需要的加载器less-loader（因为之前安装了style-loader 和 css-loader，所以这里不需要重复安装），其次需要安装less

npm install less-loader less -D

2). 配置规则：更改webpack.config.js的module中的rules数组

添加一个less的配置

// 向外暴露配置项
module.exports = {
	......
    // 配置插件
    plugins: [htmlPlugin],
module: {
    // 配置加载器loader规则
    rules: [
        // test属性表示匹配的文件类型，其中放一个正则表达式，匹配以.css结尾的文件, 
        // use属性表示指明用什么加载器loader来处理，use数组中指定的loader顺序是固定的
        // 多个loader的调用顺序是从后往前调用的，这里会先调用css-loader，再调用style-loader
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
    ]
}

}

在index,.js中导入写好less文件，测试页面效果是否更改了对应的样式

import './css/1.less'

C. 安装sass-loader,node-sass处理less文件

1).安装包

需要安装sass需要的加载器sass-loader以及sass-loader的内置依赖项node-sass

npm install sass-loader node-sass -D

2). 配置规则：更改webpack.config.js的module中的rules数组

// 向外暴露配置项
module.exports = {
	......
    module: {
        // 配置加载器loader规则
        rules: [
            // test属性表示匹配的文件类型，其中放一个正则表达式，匹配以.css结尾的文件, 
            // use属性表示指明用什么加载器loader来处理，use数组中指定的loader顺序是固定的
            // 多个loader的调用顺序是从后往前调用的，这里会先调用css-loader，再调用style-loader
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            // 注意：sass文件的后缀名是scss
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
        ]
    }
}

补充：安装sass-loader失败时，大部分情况是因为网络原因，详情参考：
https://segmentfault.com/a/1190000010984731?utm_source=tag-newest

在index,.js中导入写好scss文件，测试页面效果是否更改了对应的样式

import './css/1.scss'

D. 安装post-css自动添加css的兼容性前缀（-ie-,-webkit-）

1).安装包

安装所依赖的加载器和一个插件autoprefixer

npm install postcss-loader autoprefixer -D

2). 在项目根目录创建并配置postcss.config.js文件

// 导入自动添加前缀的插件
const autoprefixer = require('autoprefixer')
module.exports = {

plugins: [autoprefixer] // 挂载插件

}

3). 配置规则：更改webpack.config.js的module中的rules数组

// 向外暴露配置项
module.exports = {
	......
    module: {
        // 配置加载器loader规则
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
            ......
        ]
    }
}

配置完后，重新运行，可在不同浏览器中测试样式的兼容性问题。

E. 打包样式表中的图片以及字体文件

webpack默认处理不了样式表里的路径（例如图片路径）

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

使用url-loader和file-loader来处理打包图片文件以及字体文件，其中file-loader是url-loader的内置依赖项

1). 安装包

npm install url-loader file-loader -D

2). 配置规则：更改webpack.config.js的module中的rules数组

? 代表要传参，? 之后的是 loader 的参数项。

limit 用来指定图片的大小，单位是字节(byte),只有小于 limit 大小的图片，才会被转为 base64 图片

// 向外暴露配置项
module.exports = {
	......
    module: {
        // 配置加载器loader规则
        rules: [
        	......
            // 正则表达式中| 代表或者的意思，这里列举了图片文件类型和字体文件类型的后缀名
            // use也可以接收字符串，如果只有一个加载器可以不需要使用数组
            // ? 表示需要传递参数，? 之后的是 loader 的参数项。
            // limit 用来指定图片的大小，单位是字节(byte),只有小于 limit 大小的图片，才会被转为 base64 图片
            // base64格式的图片能够在加载时速度更快些
            { test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=16940' }
        ]
    }
}

更改webpack.config.js文件配置后需要重新运行 npm run dev

配置完后，重新运行，测试图片能否显示，且格式在什么情况下能转换为base64

F. 打包js文件中的高级语法

有可能这些高版本的语法不被兼容，我们需要将之打包为兼容性的js代码，我们需要安装babel系列的包

例如需要打印Person类中的静态属性info，在index.js中添加：

class Person {
    static info = 'aaa'
}
console.log(Person.info);

此时如果没有用babel会报错

（1）安装babel转换器

npm install babel-loader @babel/core @babel/runtime -D

（2）安装babel语法插件包

npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

（3）在项目根目录创建并配置babel.config.js文件

module.exports = {
    // presets 放置语法相关的包
    presets:["@babel/preset-env"], 
    // plugins 放置插件
    plugins:["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}

（4）配置规则：更改webpack.config.js的module中的rules数组

node_modules中的js文件都是依赖库中的，都是第三方包提供的，那些文件不需要经过babel转换，只需要用babel-loader转换我们自己写的JS文件

// 向外暴露配置项
module.exports = {
    ......
    module: {
        // 配置加载器loader规则
        rules: [
            ......
            // 匹配js文件，使用babel-loader，通过exclude把node_modules文件夹中的js文件排除掉
            // exclude 为排除项，表示 babel-loader 不需要处理 node_modules 中的 js 文件
            // exclude中也是正则表达式
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
        ]
    }
}

12.Vue单文件组件

传统组件的问题和解决方案

问题

1、全局定义的组件必须保证组件的名称不重复

2、字符串模板缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \

3、不支持 CSS ，意味着当 HTML 和 JavaScript 组件化时， CSS 明显被遗漏

4、没有构建步骤限制，只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器（如： Babel）

解决方案

针对传统组件的问题， Vue 提供了一个解决方案 —— 使用 Vue 单文件组件。

Vue 单文件组件的基本用法

单文件组件的组成结构

使用Vue单文件组件，每个单文件组件的后缀名都是.vue

每一个Vue单文件组件都由三部分组成

（1） template 组件的模板区域

（2） script 业务逻辑区域

（3） style 样式区域

1607867151078

代码如下：

为style标签定义scoped属性防止样式之间冲突问题

<template>
组件代码区域

</template>
<script>
js代码区域

</script>
<style scoped>
样式代码区域

</style>

示例：

<template>
    <div>
        <h1>这是App根组件</h1>
    </div>
</template>
<script>

export default {

data () {

return {}

},

methods: {
}    

}

</script>
<style scoped>

h1 {

color: red;

}

</style>

补充：安装Vetur插件可以使得.vue文件中的代码高亮

配置.vue文件的加载器

A. 安装vue组件的加载器

其中vue-template-compiler是vue-loader的内置依赖项

npm install vue-loader vue-template-compiler -D

B. 配置规则：更改webpack.config.js的module中的rules数组

......
// 导入vue加载器，得到是一个构造函数
const VueLoaderPlugin = require("vue-loader/lib/plugin")
// 向外暴露配置项

module.exports = {

......

// 配置插件

// 在这里new出构造函数的实例

plugins: [htmlPlugin, new VueLoaderPlugin],  // 请确保引入这个插件！
module: {
    // 配置加载器loader规则
    rules: [
        ......., // ... 其它规则
        { test: /\.vue$/, use: 'vue-loader' }
    ]
}

}

配置完后在index.js中引入单文件组件

// 导入单文件组件
import App from './components/App.vue'

13.在webpack中使用vue

上一节我们安装处理了vue单文件组件的加载器，想要让vue单文件组件能够使用，我们必须要安装vue并使用vue来引用vue单文件组件。

A. 安装Vue

npm install vue -S

B. 在 src -> index.js 入口文件中引入vue构造函数：import Vue from "vue"

import Vue from 'vue'

C. 创建Vue实例对象并指定el，最后使用render函数渲染单文件组件

index.js中完整代码：

// 1. 导入 Vue 构造函数
import Vue from 'vue'
// 导入单文件组件
import App from './components/App.vue'
const vm = new Vue({

// 3. 指定 vm 实例要控制的页面区域

el: '#app',

// 4. 通过 render 函数，把指定的组件渲染到 el 区域中

render: h => h(App) // 指定要渲染的组件

})

在index.html中创建一个div用于被vue控制，进行测试

    <!-- 将来要被 vue 控制的区域 -->
    <div id="app"></div>

测试效果

1607910815792

14.使用webpack打包发布项目

在项目上线之前，我们需要通过webpack将整个项目打包并发布。

A. 配置package.json

  // 在package.json文件中配置 webpack 打包命令
  // 该命令默认加载项目根目录中的 webpack.config.js 配置文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    // 用于开发调试的命令
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888",
    // 用于打包的命令
    "build": "webpack -p"
  },

B. 在项目打包之前，可以将dist目录删除，运行npm run build后会生成全新的dist目录

1607911215120

15.Vue脚手架

Vue脚手架可以快速生成Vue项目基础的架构。

脚手架就是一个命令行工具，我们可以通过执行命令的形式快速Vue项目的基础架构，之前没有脚手架的时候需要手动搭建webpack项目，手动配置vue。这样就简化了项目的创建流程，上来就能直接写代码了。

其官网地址为： https://cli.vuejs.org/zh/

A. 安装3.x版本的Vue脚手架：

npm install -g @vue/cli

B. 基于3.x版本的脚手架创建Vue项目：

1). 使用命令创建Vue项目

命令：vue create my-project

选择Manually select features(选择特性以创建项目) （手动方式创建）

1607911852355

勾选特性可以用空格进行勾选。

1607911919468

是否选用历史模式的路由：n

选择安装哈希类型的路由而不是历史模式的路由

1607911978394

ESLint选择：ESLint + Standard config

标准类型的ESLint

1607912014774

何时进行ESLint语法校验：Lint on save

1607912070018

babel，postcss等配置文件如何放置：In dedicated config files (放到单独使用文件进行配置，利于维护)

1607912132391

是否保存为模板：n （按照需要自行选择）

1607912178232

使用哪个工具安装包：npm

2). 基于ui界面创建Vue项目

命令：vue ui

打开一个浏览器面板

在自动打开的创建项目网页中配置项目信息。

1607913469824

1607913510721

1607913555877

此处必选的有：Babel、Router、Linter/Formatter、使用配置文件，其他的看情况而定

1607913665758

1607913740171

点击创建项目后可以按照需求是否保存预设，

3). 基于2.x的旧模板，创建Vue项目（了解即可）

npm install -g @vue/cli-init

vue init webpack my-project

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

1607914177679

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:

16. Vue脚手架的自定义配置

A. 通过 package.json 进行配置 [不推荐使用]

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

注意：不推荐使用这种配置方式。因为package.json主要用来管理包的配置信息；为了方便维护，推荐将vue脚手架相关的配置，单独定义到vue.config.js配置文件中

B. 通过单独的配置文件进行配置，创建vue.config.js

在项目的跟目录创建文件 vue.config.js
在该文件中进行相关配置，从而覆盖默认配置

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

17.Element-UI的基本使用

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

官网地址为： http://element-cn.eleme.io/#/zh-CN

1）基于命令行方式手动安装

① 安装依赖包 npm i element-ui –S

npm install element-ui -S

② 导入 Element-UI 相关资源

在main.js中进行配置

// 导入组件库
import ElementUI from 'element-ui';
// 导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css';
// 配置 Vue 插件
Vue.use(ElementUI);

配置完成后，可复制一段element-ui组件标签在App.vue中进行测试

1607915599765

2）基于图形化界面自动安装

① 运行 vue ui 命令，打开图形化界面

② 通过 Vue 项目管理器，进入具体的项目配置面板

③ 点击插件 -> 添加插件，进入插件查询面板

④ 搜索 vue-cli-plugin-element 并安装

1607916053340

⑤ 配置插件，实现按需导入，从而减少打包后项目的体积

posted @ 2020-12-30 22:15 倚栏侧看花满楼阅读(136) 评论(0) 收藏举报

刷新页面返回顶部

vue前端工程化

1.模块化的分类

模块化概述

A.浏览器端的模块化

B.服务器端的模块化

C.ES6模块化

2.在NodeJS中安装babel

A.安装babel

B.创建babel.config.js

C.创建index.js文件

D.使用npx执行文件

3.设置默认导入/导出

A.默认导出

B.默认导入

4.设置按需导入/导出

A.按需导出

B.按需导入

5.直接导入并执行代码

6.webpack的概念

7.webpack的基本使用

A.创建项目目录并初始化

B.创建首页及js文件

C.安装jQuery

D.导入jQuery

E.安装webpack

8.设置webpack的打包入口/出口

9.设置webpack的自动打包

默认自动打开浏览器

10.配置html-webpack-plugin

11.webpack中的加载器

12.Vue单文件组件

传统组件的问题和解决方案

Vue 单文件组件的基本用法

13.在webpack中使用vue

14.使用webpack打包发布项目

15.Vue脚手架

16. Vue脚手架的自定义配置

17.Element-UI的基本使用

公告