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、本篇项目例子是继续前篇文章的项目例子

Vue2之webpack篇（二）Loader_申小兮IU的博客-CSDN博客loader处理css、图片、ES6转ES5、打包，分离vue，父子组件传参https://blog.csdn.net/qq_51478745/article/details/128596414?spm=1001.2014.3001.5501

---

一、Plugin

1、简介

（1）Plugin相当于一个插件

（2）功能

①可用于添加版权

②打包html到dist文件夹

• 拓展：项目完成后，项目部署到服务器上的就只有dist文件夹，但是前面文章所学内容并未将html打包到dist文件夹

③压缩js

• 拓展

1. 生产环境：所有代码挤在一块，不留空隙，为了减少空间
2. 开发环境：间隔回车错落有致，可读性强

（3）loader与plugin的区别

①loader主要用于转换某些类型的模块，是一个转换器

②plugin是插件，是对webpack本身的扩展，是一个扩展器

2、添加版权的plugin

webpack内置就有plugin，因此只需要在webpack.config.js中的plugins中配置插件

const webpack = require('webpack')

plugins:[
	new webpack.BannerPlugin('最终版权归')
]

配置

dist打包的bundle.js文件

 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，将引入语句注释

③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文件

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官方文档也有相关内容安装 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://v2.cn.vuejs.org/v2/guide/installation.html

（5）Vue CLI也有自己的文档

介绍 | Vue CLI️ Vue.js 开发的标准工具https://cli.vuejs.org/zh/guide/

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）然后此处先默认回车，进入到下一步

Vue CLI各种功能的选择

 （4）此处小编选择2.x的vue版本，回车进入下一步

选择vue2.x的版本

 （5）ESLint代码规范，当代码写不规范的时候会报错，默认回车，进入下一步

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

②在App.vue文件导入新建的页面组件，注册，使用

 （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、初始化项目功能