vuecli使用（vuecli使用webpack5）

哈喽哈喽 大家好，今天给大家分享一下 创建Vue 工程的小工具 vuecli

Vue cli 就是 vue的 client，客户端，是一个命令行工具，能帮我们快速构建一个 vue的标准工程。是官方cli，支持vue2和vue3不同版本。初始化一个vue工程，引入相关依赖。

首先你本地需要有node环境，包括node和npm。请参考官方文档安装node环境。 https://nodejs.org/en/

你可以在命令行状态下敲入 如下命令检查自己是否有node环境

有了node环境，我们可以通过npm来安装vuecli，当然，如果你习惯用yarn，请先使用 npm安装yarn。

检查vuecli是否安装成功

cli安装好后，我们可以创建标准的vue工程了。

命令行敲入 vue create XXX

其中XXX是你希望的工程名，会在当前目录下生成同名文件夹的工程文件。

提示要创建Vue的哪个版本，我们选择第一项直接回车，就是创建Vue2的默认工程。

经过一系列提示后，工程就创建好了，我的工程名是home，最后提示我进入home后，运行 yarn serve 或者 npm run serve ，来启动默认的webpack dev server来运行服务。

服务启动完成， 提示我可以访问 localhost:8080 来访问我默认创建的这个vue 前端页面

我们打开浏览器，在地址栏键入 http://localhost:8080 后回车

一切顺利的话我们会看到如下页面

这个就是我们通过vuecli默认创建出来的一个vue工程了的默认页面。

工程目录结构如下。

node_modules: 前端工程的依赖库，node-js的npm会通过package.json 管理 本地包，其中外部依赖库，会在npm install时，安装到node-modules下。

public: 需要静态发布的资源目录，默认里面放了一个index.html，这个就是我们开发页面的基础html。之后vue创建的动态dom都是挂在到这个页面上的，如果存在不在npm下管理的第三方插件，可以通过 public这个文件来发布，并在index.html中载入这些外部依赖。

src：源代码目录，其中main.js 就是我们前端程序的主入口。根组件就是从这里最开始实例化的，这个根组件通常就是 App.vue。通常会在App.vue中搭建 站点的主结构，引入vue router，在App.vue下根据url映射决定显示哪个视图组件。

.gitignore: git仓库的忽略文件，当前目录下哪些文件不需要git仓库托管，可以在ignore文件中记下文件名，在git add时会忽略掉那些文件。

babel.config.js: 因为我们的浏览器不一定会认识现在主流的es6语法，所以我们编写的js代码，是通过webpack编译发布的，其中babel就是用来解析es6的，es6也存在不同的版本，可以通过这个文件，配置es6的特性。

package.json ： npm的包描述文件，当前工程的特性在这个文件中

README.md：本身是个markdown格式的文件，markdown是类似html的格式化文档，通过特殊字符表达特定格式，一般网站都会默认读取README.md形成说明页面。

除了默认的依赖，我通常会在package.json中添加如下一下，以方便开发。

其中pug可以以pug语言来书写html模板，大大减少了不必要的字符，少敲了很多代码。

sass是在写css时，语法和pug高度匹配，非常节省代码

这里需要注意的是，node-sass对node-js版本是有对应关系的，如果版本不匹配，工程会有编译错误，请在node-sass的官方网站检索对应的node-js的版本，下载对应的node-sass。

相应的，sass-loader与node-sass也是有版本对应关系的，要注意