vue CLI脚手架初安装记录

Posted 2021-07-17 安之ccy

1.为何需要脚手架：减少花在配置的时间，专注于开发
平常开发需要的：
开发服务器：模拟真实的开发环境，不是file://本地文件
babel：将es6转换成es5语法，再转到服务器上
postcss后处理器 less / sass预处理器 高效
esLint代码规范 不规范就报代码规范的错

前端自动化构建工具，配置babel，postcss，esLint
1.Webpack，需要配置webpack插件
2.Gulp

好文链接：为何要使用CLI3

脚手架 负责自动配置 ——“零配置”
Vue CLI2
Vue CLI3

2.安装脚手架
npm install -g @vue/cli

先安装node.js就有npm了—— nodejs.org
node.js 版本要求：> 8.9
npm install -g @vue/cli 安装

vue --version版本号
npm uninstall vue-cli -g 卸载

3.创建自己的项目
在想要创建vue项目的目录下：vue create + 项目名，
项目名不允许有大写字母，支持横杆，如vue-test

然后进入所需要的插件的页面，可以选择默认的bable和esLint，或者自定义，用空格选择或取消
回车进入下一页面

选择使用哪种ESLint代码规范？
ESLint with error prevention only 只是错误 ——本人选择此项
ESLint + Airbnb config airbnb代码规范
ESLint + Standard config 标准代码规范
ESLint + Prettier

pick additional lint features：选择lint特性？
lint on save ——默认
lint and fix on commit

babel，postcss，eslint等等的配置是分开单独保存还是都保存在package.json里？：
in dedicated config files ——默认分开保存
in package.json

保存刚才的设置供之后使用吗？y/N

等待安装

打开项目并运行：
cd + 你执行的目录：cd vue-test
运行脚本：npm run serve

给出两个可访问链接
复制到浏览器并打开
如：local: http://localhost:8080/
可以看到项目创建成功了

回到项目代码，看到里面有一个package.json文件：
里面的：
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”
}
中的"serve"字段就是我们刚刚运行的脚本"npm run serve“中的"serve”
“scripts"中的build字段是用于项目打包（生产环境），命令：”npm run build"，
lint字段 用于检查和修复源文件

其他字段说明：
“dependencies”：运行依赖
“devDependencies”：开发依赖

修改配置，可以新建一个vue.config.js文件，将配置的修改写在里面
或者使用可视化工具，命令行输入：vue ui（最好进入了项目目录再输入此命令，或者在ui界面手动输入目录，目录跳转比较快）
自动打开一个链接，端口8000
导入创建的项目，在里面修改配置