Vue&&Webpack原始构建方法及Vue-cli脚手架搭建方法

前言：

• 文章篇幅较长，分为三部分。
  – 第一部分，vue的简单概述
  – 第二部分，webpack的原始构建过程
  – 第三部分，vue-cli脚手架的快速搭建过程
• 导读
  – 简单快速开发使用，请看第三部分
  – 想了解构建过程及部分原理，请看第二部分
  – vue的简单概述，请看第一部分
• 本人是一名学生，文笔粗糙，还望各位看官多多包涵…

一、VUE简单概述

在普通网页中的使用：

1.使用script标签，进行vue包的引入

2.在index页面中，创建一个id为app的div容器

3.通过new Vue得到一个vm实例

在项目中使用：

1.安装vue

npm i vue -S

2.在入口函数中导入vue

import Vue from 'vue'

注意：此处可能报错，因为导入的vue包有可能为阉割版，并没有提供网页中使用的方式

解决方法：

方法①更改 node_modules>vue>package.json，“main”:“dist/vue.runtime.common.js”，更改为"main":“dist/vue.min.js”

方法②手动导入把上述代码更改为 import Vue from ‘…/node_moudles/vue/dist/vue.js’

方法③加入如下图配置

方法④ 使用render函数

3.在入口函数创建实例（也要做在index.html页面创建app容器）同上

4.使用路由

npm i vue-router -D

二、wabpack

webpack 优势：

①合并压缩静态资源文件，减少网页发送请求

②解决各个静态文件之间的依赖

整体结构：

build  //构建脚步目录，保存一些webpack的初始化配置
config  //构建配置目录，项目初始化的配置，包括端口号等
node_modules  //npm加载的项目依赖的模块
src  //源码目录，这里是我们要开发的目录，基本上要做的事情都在这个目录里
- assets  //资源目录，用来放置图片，如logo等 
- components  //组件目录，用来放组件文件
- router  // 路由器
- app.vue  //是项目入口文件
- main.js   //是项目的核心文件
static   //文件夹用来放置静态资源目录，如图片、字体等。
test   //初始测试目录，可删除
.babelrc babel   //编译参数，vue开发需要babel编译，使高级语言转化为低级的语言
.gitignore    //用来忽略过滤一些版本控制的文件，比如node_modules文件夹 
index.html   //是首页入口文件，你可以添加一些 meta 信息或统计代码啥。 
package.json   //是项目配置文件，记载着一些命令和依赖还有简要的项目描述信息 
README.md    //项目的说明文档，markdown 格式，介绍自己这个项目的

步骤：

1. 安装webpack

   npm i webpack -g
   

2. 初始化项目生成package.json文件

   npm init -y
   

3. 安装webpack-cli ‘’

   npm i webpack-cli -g
   

4. 初代打包命令

   webpack filename -o filename --mode --development
   

5. 根目录创建配置文件 ‘webpack.config.js’，指定入口和出口

本人遇到此处的坑（webpack4.0入口为index.js）,更改此处入口和出口后报错，所以本人不推荐更改入口出口文件。

6. 更新后的打包命令

   webpack --mode --development
   

   由于每次修改源码再打包测试太麻烦了，所以这里引入webpack-dev-server

7. 安装webpack-dev-server ‘npm i webpack-dev-server -D’（依赖本地webpack）

   本地安装的依赖模块，不能在本地中输入命令运行，需要在package.json文件中的script对象中加入“xxx”：“webpack-dev-server”

   指令拓展：“webpack-dev-server --open --port --host --contentBase --hot”

   webpack-dev-server 打包生成的bundle.js并没有放到物理磁盘上，而是放在了内存

8. 安装html-webpack-plugin

   作用：在内存中生成一个html页面，把打包好后的js文件自动引入

   npm html-webpack-plugin -D
   

9.安装第三方loader

①CSS loader （less-loader，sass-loader）处理css文件

npm i style-loader css-loader -D

//npm i less-loader -D
//npm i sass-loader -D

②URL loader (内部依赖file-loader) 处理图片 字体

npm i url-loader file-loader -D

limit给定的值是图片大小，单位为Byte。（简单总结：大图片建议不转base64，小图片可以转base64）

如果图片大于或等于limit值，则不会被转为Base64编码。（不转为base64的优点 占空间减少 ，但请求次数增加）

如果图片小于limit值，则会被转为Base64编码。（转为base64的优点 请求次数减少，但占空间会变大）

name后边的值为8位hash编码+图片名字+图片格式

③babel loader 处理高级语法无法编译问题

npm install -D babel-loader @babel/core @babel/preset-env webpack

排除node_modules文件夹是因为这文件夹的js文件不需要转换编译。

添加文件 .babelrc 并加入以下配置并安装

④vue loader 处理组件化开发无法引入vue组件的问题

npm i vue-loader vue-template-compiler -D

到这里，webpack的基本配置已经完成了。

三、VUE-CLI脚手架快速构建webpack项目

1.官网安装node.js(安装成功后即可使用npm包管理工具)

2.打开cmd

3.安装vue及vue-cli

npm i vue vue-cli -g

4.在此目录下开始

5.初始并创建你的webpack项目

vue init webpack 你的项目名称

出现以下过程：

• “Project name”：这个是项目名称

• “Project description”：项目描述

• “ Author (* <*>)”：作者

• “Vue build (Use arrow keys)”：选择默认的就成Runtime + Compiler: recommended for most users

• “Install vue-router? (Y/n)”：是否安装vue-router，y

• “Use ESLint to lint your code”:是否使用ESLint，y

• “Pick an ESLint preset Standard”： 选择一个ESLint预设，编写vue项目时的代码风格，y

• “Set up unit tests Yes”： 是否安装单元测试，y

• “ Pick a test runner”：just

• “Setup e2e tests with Nightwatch”：是否安装e2e测试，y

• “Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)”：是否使用安装依赖的包，这个我使用的是npm install，也可以使用yarn install

这几个配置选择yes 或者 no 对于我们项目最大的影响就是，如果选择了yes 则生成的项目会自动有相关的配置，有一些loader我们就要配套下载。

4.构建成功 冲冲冲！