Vue CLI脚手架
1、node_modules依赖包
①我们通过项目终端输入npm i，就会生成该依赖包，依赖包会自动根据package.json文件中所有需要的东西进行封装下载，例如：jquery，vue2等等
②该依赖包因为承载项目的所有内容，在项目大的时候其所占内存也会很大。
③在项目传发时，依赖包是可以删除的，他人只需要输入npm i，即可下载回来
2、webpack安装
①npm install webpack@4 --save--dev：-save局部安装webpack
②npm install webpack -g：-g全局安装webpack
3、本篇项目例子是继续前篇文章的项目例子
一、Plugin
1、简介
（1）Plugin相当于一个插件
（2）功能
①可用于添加版权
②打包html到dist文件夹
- 拓展：项目完成后，项目部署到服务器上的就只有dist文件夹，但是前面文章所学内容并未将html打包到dist文件夹
③压缩js
- 拓展
- 生产环境：所有代码挤在一块，不留空隙，为了减少空间
- 开发环境：间隔回车错落有致，可读性强
（3）loader与plugin的区别
①loader主要用于转换某些类型的模块，是一个转换器
②plugin是插件，是对webpack本身的扩展，是一个扩展器
2、添加版权的plugin
webpack内置就有plugin，因此只需要在webpack.config.js中的plugins中配置插件
const webpack = require('webpack')
plugins:[
new webpack.BannerPlugin('最终版权归')
]
3、打包html的plugin
（1）安装html-webpack-plugin
npm i html-webpack-plugi
（2）在webpack.config.js的plugins中配置htmlWebpackPlugin
const htmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
new webpack.BannerPlugin('最终版权归申小兮所属'),
new htmlWebpackPlugin()
]
（3）webpack打包完，在dist文件夹中我们会看到多生成了一个html文件
（4）但是打开index.html查看，发现图片无法显示，是因为我们原先通过配置css-loader时，指定了html中引用图片的相对路径
（5）现在dist中已经有html文件了，就不需要设置图片的相对html文件路径，将publicPath: "./dist/"注释
// 处理css中图片的使用
{
test: /\.(png|jpg|git)$/,
/* 数组对象形式 */
use: [
{
// 使用file loader，解析文件路径
loader: "file-loader",
// 配置
options: {
// 指定html中引用图片的相对html文件的路径
// publicPath: "./dist/",
// 指定文件名，一般会放在一个img相关的文件夹中
name: "imgs/[contenthash].[ext]",
},
},
],
},
现在dist已经有html文件了，但是却找不到#app的template
①需要在配置htmlWebpackPlugin中添加指定html文件
plugins: [
new webpack.BannerPlugin("最终版权归申小兮所属"),
new htmlWebpackPlugin({
template:'./class.html'
}),
],
注意：class.html是项目中的html文件，不是dist文件夹中生成的html文件
②class.html文件也不需要再引入js，将引入语句注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<!-- <script src="./dist/bundle.js"></script> -->
</body>
</html>
③webpack打包，运行dist文件夹下的index.html文件
4、压缩js的plugin
（1）安装
npm i uglifyjs-webpack-plugin@1
（2）配置
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
plugins: [
new webpack.BannerPlugin("最终版权归申小兮所属"),
new htmlWebpackPlugin({
template:'./class.html'
}),
new uglifyjsWebpackPlugin(),
],
（3）webpack打包，查看dist文件夹下的bundle.js文件
二、搭建本地服务
1、搭建的原因
每次预览效果都需要webpack打包，比较麻烦，而webpack提供了一个可选的本地开发服务器，可以实现浏览器自动刷新显示修改后的结果
2、安装
npm install webpack-dev-server
3、配置
（1）在package.json文件中配置scripts的dev
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},
（2）终端启动
npm run dev
（3）如果启动报错，很可能是webpack，webpack-dev-server，css-loader等等的版本冲突问题，需要进行降级尝试
例如：css-loader原先为版本5，就可以试着降到4版本或3版本，然后再启动
npm install css-loader@3
4、login.vue文件修改内容后，不需要手动webpack，会自动更新
根据前面所学，每个项目都是手动去配置，效率就很低，因此，引入Vue CLI脚手架，通过脚手架帮我们完成这些工作。
接下来就让我们一起学习一下脚手架吧🧐
三、Vue CLI脚手架
1、介绍
（1）CLI是Command-Line Interface，翻译为命令行界面，俗称脚手架
（2）Vue CLI是Vue官方发布的项目脚手架
（3）使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置
（4）Vue官方文档也有相关内容
（5）Vue CLI也有自己的文档
2、安装CLI
（1）右击电脑左下角的开始，然后打开Windows PowerShell(管理员)，输入以下代码【注意小编这里安装的是最新Vue CLI4.x版本的脚手架，需要Node.js v8.9及以上版本（推荐v10以上）】
npm install -g @vue/cli
（2）安装Vue CLI 2.x版本，步骤和上面，代码如下
npm install -g @vue/cli-init
接下来的项目，小编将用新版本脚手架给大家介绍简单操作
3、创建项目
（1）在项目终端输入vue create 项目名，然后回车，进入初始化项目功能
vue create my-project
（2）上下键是移动选中，这里先选择自定义创建Manually select features，回车到下一步
（3）然后此处先默认回车，进入到下一步
（4）此处小编选择2.x的vue版本，回车进入下一步
（5）ESLint代码规范，当代码写不规范的时候会报错，默认回车，进入下一步
（6）接下来也是默认回车，进入下一步
（7）此处选择我们所熟知的package.json，然后回车，进入下一步
（8）接下来的意思是，是否将上面的设置保存，看个人需求输入y/n，然后回车，就会开始创建项目，等待加载完毕
（9）加载完毕的效果图如下
4、项目文件介绍
（1） public文件夹中
①favicon.ico文件
②index.html文件
与之前手动配置打包的html文件类似
（2）src文件夹
①package.json
②main.js入口文件
（3）更多文件含义，小伙伴们可以自己去探索🧐
5、启动项目
（1）可以根据启动提示，先进入到项目目录
cd my-project
（2）然后输入以下代码，启动项目
启动项目的语句也可在上面介绍的package.json文件查看
npm run serve
（3）Ctrl+单机：打开提供的网址
6、创建一个页面组件
（1）简单内容显示步骤
①统一在components文件夹下创建UserInfo.vue文件
<template>
<div>
<h1>用户信息页</h1>
<h2>{{ user }}</h2>
</div>
</template>
<script>
export default{
name:'UserInfo',
data(){
return {
user:'申小兮'
}
}
}
</script>
②在App.vue文件导入新建的页面组件，注册，使用
<script>
import HelloWorld from './components/HelloWorld.vue'
// 1、导入
import UserInfo from './components/UserInfo.vue';
export default {
name: 'App',
components: {
HelloWorld,
//2、注册
UserInfo
}
}
</script>
<template>
<div id="app">
<!-- 3、使用 -->
<user-info></user-info>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
（2）关于vue文件的编写，VSCode提供了很多好用的插件，能够提示内容
①下面是小编用到的有关vue的插件，更多好用插件小伙伴们可以去搜索
②下面是小编的展示，整个vue框架都能一次性生成🧐
（3）打包项目
①在终端ctrl+c，y，回车，终止项目，然后在终端输入打包命令，打包命令，要看package.json文件的build语句
②根据语句，输入以下代码，就行打包
npm run build
③打包完成后，我们会在项目文件夹下看到生成的dist文件夹
四、拓展：Vue CLI 2搭建脚手架
1、进入项目终端，输入搭建代码vue init webpack 项目名
vue init webpack try-vue2
2、初始化项目功能
投递阿里国际数字商业集团等公司10个岗位 >
