一、安装脚手架
1、在https://nodejs.org/zh-cn/download/下载node.js并安装
2、检查node和npm的版本(node -v、npm -v),如果在cmd中可以查看node和npm的版本,但是在VSCode中无法识别node、npm,以管理员身份重启VSCode即可
3、查看镜像库地址,如果不是国内地址可以设置为淘宝镜像
npm config get registry
npm config set registry https://registry.npm.taobao.org
4、如果npm命令不太稳定或报错的话可以使用cnpm,语法与npm一模一样
npm install -g cnpm --registry=https://registry.npm.taobao.org
5、检查vue脚手架的版本(vue --version、vue -V)
6、如果无法使用vue命令,则需要安装或更新vue
npm install -g @vue/cli@next //5.0.0-alpha.3
npm install -g @vue/cli //4.5.11
npm uninstall -g @vue/cli
二、创建Vue项目
1、打开命令行客户端:Terminal->New Terminal
2、创建vue项目(项目名称中的字母必须是小写):vue create cli-01
3、选择Manually select features + 回车 / ESLint with error prevention only
4、上下键选择Router + 空格切换选中状态
上下键选择Linter/Formatter + 空格切换选中状态
设置完毕后摁回车
5、选择3.x(Preview) + 回车
Use history mode for router -> y
6、选择In package.json + 回车
7、输入n + 回车
8、如果你想要删除之前保存的配置信息,可以删除配置文件:.vuerc
Linux系统下配置文件在home/.vuerc
Windows系统下配置文件在C:\Users\用户名\.vuerc
9、项目创建完毕后,系统提示你使用:cd -cli-01进入刚创建的项目目录,npm run serve运行项目
10、在项目开发中,src目录是你开发的文件目录,默认内置assets和components
(1).assets目录用于存放图片、音频、视频等资源
(2).components目录用于存放单文件组件
11、和webpack一样package.json是配置信息,可以在这里进行查看和修改配置