1.安装node
下载地址:http://nodejs.cn/ 下载完成后,执行安装程序,直接进行安装即可 安装完成后,打开命令窗(cmd) 输入 node -v 和 npm -v 可查看安装的 node.js 和 npm 的版本号
2.安装编辑器
vscode:下载地址:https://code.visualstudio.com/
3. 安装Vue
● 缺使用 npm 进行安装 缺点:安装速度慢,因为资源在国外,可以使用国内镜像 ● 使用国内镜像资源安装 i. 首先切换淘宝镜像
npm config set registry https://registry.npm.taobao.org
ii. 安装Vue 使用 npm 安装 vue 的脚手架
npm install -g @vue/cli
4. 创建Vue项目
4.1. 创建文件 创建文件夹用vscode打开,点击终端按钮,cd进入到你要创建的文件夹里
cd vuetest01
输入命令
vue create vue01
4.2. 选择配置信息
 ● 通过上下方向键选择,然后回车确认 选择 Manually select features 自定义配置 ● 之后按空格键选择要安装的资源配置,带 * 号说明选中了  ● 选择版本:选择vue 2.x ● 路径(路由)模式选择 是否使用 history router ?  ● 选择CSS预处理语言  less:主要解决浏览器兼容,简化CSS代码
● 选择代码检查和格式化配置  ● 选择语法检查方式  ● 选择存放配置的地方:把babel,postcss,eslint这些配置文件放哪  ● 是否保存刚刚你配置好的 选择 N 不报错,选择 Y 保存,选择保存后,需要填写名字 4.3. 启动项目   ● 进入 vue01的路径里
cd vue01
● 执行启动命令
npm run dev
 
PS:如有错误,欢迎指正~
|