vue-cli脚手架安装教程

150 阅读2分钟

先安装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