1、安装node.js
1.1、访问node.js官网https://nodejs.org/zh-cn/下载并安装
1.2、在命令行输入node -v和npm -v命令验证是否安装成功
2、安装vue-cli
2.1、在命令行输入npm install -g vue-cli命令安装vue-cli
2.2、在命令行输入vue -V命令验证是否安装成功
3、初始化vue项目
3.1、进入到我们想放vue项目的目录下,我这里在C:VueProject目录下
3.2、执行命令vue init webpack vuedemo,会在C:VueProject目录下创建文件夹vuedemo,作为vue项目的根目录
3.2.1、项目名默认为vuedemo,若不想修改项目名,直接回车即可;如想修改项目名,输入新的项目名回车
3.2.2、项目描述可自定义
3.2.3、作者可自定义
3.2.4、Runtime + Compiler: recommended for most users
3.2.5、安装路由插件
3.2.6、使用eslint依赖规范代码
3.2.7、选择一个预置ESLint
3.2.8、设置单元测试,个人觉得可以不设置
3.2.9、设置 e2e测试,个人觉得可不设置
3.2.10、是否在项目创建完成后自动安装依赖,个人建议选择自己安装
4、安装依赖
4.1、进入到创建的vue项目的根目录下
4.2、输入命令npm install安装依赖,联网下载,需等待片刻
5、验证创建的项目是否可正常运行
5.1、命令行输入npm run dev
5.2、在浏览器输入地址http://localhost:8080/#/,可正常访问就ok
6、可能遇到的问题
6.1、执行vue init webpack vuedemo命令时报错: Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 13.229.188.59:443,解决方法如下
以管理员身份编辑C:WindowsSystem32driversetchosts文件,增加如下内容:
192.30.253.112 github.com
151.101.88.249 github.global.ssl.fastly.net
6.2、在C:WindowsSystem32driversetc下没有找到hosts文件,解决方法如下
6.2.1、在“文件夹选项”中去掉勾选“隐藏受保护的操作系统文件(推荐)”和选中“显示隐藏的文件、文件夹和驱动器”
6.2.2、在6.2.1设置后还是没找到hosts文件,那么就手动创建hosts文件即可
7、项目名和项目所在根目录名可以不一样,可在项目根目录下的package.json文件中进行修改
8、执行npm run dev后自动打开浏览器配置