vue 脚手架详解

Vue 框架开发 CLI

[vue 脚手架中 webpack 的配置](vue 脚手架中 webpack 的配置.html)

2.0（旧版本）

还得再安装

npm install @vue/cli-init -g

创建 cli2

vue init webpack 项目名称

启动项目目录

npm run dev

手动打开或关闭 Eslint 语法规范 true 就是打开、false 关闭

**打包 **npm run build

打包后的 js

3.0+（现版本）

启动

创建 cli3

npm install -g @vue/cli

vue create 项目名称

启动项目目录中

npm run serve

-bable 把浏览器不认识的 js 解析成认识的 js
-typescript js 的超集，类型约束
-Progressive Web App(PWA) Support -先进 App 配置增加很多功能（推送通知
-router 根据不同的路径展示不同的页面
-Linter / Formatter 就是 cli 的 ESLint ES 代码规范
-CSS Pre-processors 样式预处理 >选了后可以使用 less、sess
E2E Testing 端到端测试
- 单元测试： https://blog.csdn.net/weixin_33981932/article/details/89698273

版本选择

配置文件（Babel,ESlint,etc..）放置位置

是否把之前的配置保存为新的默认配置

视图创建管理 VUE

vue ui

可以导入 vue 项目进行视图化管理

git 配置

VSC 就是仓库管理工具

git 的配置文件在根路径下（了解几乎不用在配置了）

–设置了很多上传仓库时要忽略的文件。

** ****比如根据 package.json 创建的 node_modules。打包后的 dist 文件等等…**

package-lock.js

中记录的是 node_modules 中安装的文件的详细版本

package-lock.json 是在运行“npm install”时生成的一个文件，用于记录当前状态下项目中实际安装的各个 package 的版本号、模块下载地址、及这个模块又依赖了哪些依赖。

但为什么有了 package.json，还需要 package-lock.json 文件呢，当 node_modules 文件夹并不存在或被删除时，需要用到 npm install 重新装载全部依赖时，通过 package-lock.json 可以直接表明下载地址和相关依赖，相对下载速度也更快，也不容易报错。