先安装node.js
- 官网直接下载,路径可以自己修改,其他全部选默认安装,后面协议不要打勾。
安装vue cli
- 通过win + R 输入cmd命令,先检查node.js是否安装成功,看见版本号才算成功
- 为了能更快的下载脚手架,在命令行先输入*npm config set registry=rejistry.npm.taobao.org*命令安装淘宝镜像,但我本人还是喜欢用官方默认的镜像源,虽然慢但不报错
- 然后输入命令直接在终端安装: npm install -g @vue/cli
- 安装成功后输入vue回车,检查安装是否成功, 选择版本
- 创建工程:vue create project 这个过程有一定的耗时,项目名称不能包含大写字母
- 启动项目: npm run serve 启动成功之后会出来两个网址,选择本机网址在浏览器打开,看见vue的大logo就算全部成功了
注意:常见的还有通过yarn安装和创建的,那个还需要配置下载yarn,对于电脑只装node.js的人来说还是选择npm的方法,那个要复杂一点
脚手架文件目录介绍
-
node_modules 第三方文件包
-
public 用于放index.html 模板文件和网站logo
-
src编写源代码的地方,大量用来编码的文件夹
-
package.json 项目配置文件,里面记录了我们的项目名和项目版本号以及scripts脚本
基于vue-cli 创建自定义项目
-
找到想要存放项目的目录,按住shift键,然后鼠标左键,选择打开Windows PowerShell窗口,输入创建命令,如果报错提示,系统禁止运行脚本,就切换位管理员身份打开窗口,输入
set-ExecutionPolicy RemoteSigned命令和y切换,就不报错了 -
创建选择自定义版本,下箭头切换选项,空格选中需要勾选的,回车
-
再选择vue.js的版本号
代码规范
使用插件ESlint,在编辑器里面打开设置,配置命令
输入:"editor.codeActionsOnSave": {
"source.fixAll": true
},
"editor.formmatOnSave": false