构建Vue-cli步骤总结

构建vue-cli步骤总结

前天一个大二的学妹私信我，叫我帮忙找下node-v8.11.1-x64.msi的安装包。由于公司网比较慢，所以想从CSDN上直接下载，但是发现基本上都要50个积分，坑的一逼。因为整理出几个版本的node.js安装包、并且把之前记录的构建vue项目详细步骤分享一下。

node-v8.11.1-x64：

链接：https://pan.baidu.com/s/1gQfCX3Gzn1o-UG14FiXnqw  
提取码：k9hr 

node-v10.16.0-x64

链接：https://pan.baidu.com/s/15nP6uQZBo4LdNMdC4YqheQ 
提取码：7oyp 

node-v12.18.4-x64

链接：https://pan.baidu.com/s/1EOtDfVr3G7O2ektEmbEUuA 
提取码：i4qe 

node-v14.15.4-x64

链接：https://pan.baidu.com/s/1jq6KxpiYgIZ7hkCka4D5ew 
提取码：vuoz 

1、下载并且安装node.js,安装后系统默认配置好环境（此电脑-属性-高级系统设置-环境变量-系统变量-path)

2、查看node版本以及npm版本，安装node以后，系统自动帮我们安装好npm。

node与npm版本一般都是有对应关系的，对应关系详情如下：

https://nodejs.org/zh-cn/download/releases/

注意：如果node与npm版本对应不上，则卸载node且需要彻底删除npm后，重新安装node

查看node版本
node -v

查看npm版本
npm -v

3、为加速配置，注册到淘宝的环境

npm config set registry https://registry.npm.taobao.org

4、安装vue-cli（第一次安装时需要，已经安装过了无需再次安装）

npm install -g vue-cli

5、进入创建项目的目录

cd xxxx

xxxx指的是项目的路径

6、初始化项目

vue init webpack just-learning

just-learning是指项目名字

下载模板后，会看到如下页面

Install vue-router?
-是指是否需要路由，在开发vue的时候需要用页面路由，此处输入 y

Use ESLint to lint your code?
-是否需要ESLint 校验代码，ESLint 是一个代码格式的检查。一般新手不建议使用，因为ESLint 是强的代码规范约束，如果代码不规范就会报错，可等熟悉vue编码后再使用。此处输入 n
Set up unit tests
-是否建立单元测试，暂时不需要，此处输入 n
Setup e2e tests with Nightwatch?
-不需要，次处输入 n
Should we runnpm installfor you after the project has been created? (recommended)
-键入Enter

7、进入刚创建的项目目录

cd just-learning

8、下载依赖

npm install

9、启动项目

npm run dev

访问：http://localhost:8080/#/，出现如下页面则表示成功