vue-cli使用教程

vue-cli使用教程

①全局安装
npm install -g @vue/cli
②配置环境变量 E:\npm_install_g

③命令行输入vue是否有此命令、 vue -V 查看版本
④vue-cli创建工程
在项目目录进入cmd
第一种：使用default默认的依赖预置


第二种：选择手动安装vue依赖

下次创建工程，可以选择我们预置的安装依赖模板

⑤运行npm run build生成dist文件目录
⑥在package.json中配置指令映射：vue-cli-service inspect
运行npm run inspect查看webpack配置
运行npm run lint可以检查代码不规范的地方并调整，比如有空格、空行

⑦vue-cli创建的项目目录详解

⑧vue-cli的配置文件 :vue.config.js
详情查看官网vue-cli配置参考：https://cli.vuejs.org/zh/config/#css-loaderoptions
vue.config.js中一些常用配置：比如配置端口、自动打开浏览器、关闭lint格式检查（如果觉得每次编译出现代码格式警告很烦人的话）、指定打包文件目录



⑨Eslint插件配置： (如运行npm run lint 会自动补全分号)
具体配置参考官方文档：https://eslint.bootcss.com/docs/user-guide/configuring/
如果嫌配置麻烦，可以使用默认的eslint规范配置；只不过在使用eslint插件进行代码规范时，需要在vue.config.js中打开eslint功能（默认打开），并运行命令npm run lint完成代码规范调整；
如果觉得eslint插件每次规范代码时，出现黄色警告比较烦人，可以在vue.config.js中关闭eslint功能。

⑩vscode中搜索安装Vetur插件
file>preferences>user snippets>搜索vue/vue.json)>输入自定义模板。