vue-cli初始化新项目

Posted 2021-03-07 liuyang-520

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文件中进行修改