从零开始搭建vue项目环境以及一些坑

因为楼主我的电脑已经有node，所以这里就不介绍如何安装nodejs了。

对于已经有node的电脑，需要看一下node的版本，vue安装环境的要求需要node>=6.x,，推荐8.x，npm也是需要3+才行。下面介绍下查看自己的node版本以及安装指定node。

1.查看node版本：

node -v

如果是6以下或者是11的版本的话需要给node安装指定版本，要不装vue环境的时候会报错导致装不上。

bogon:my-project dfzxit06$ node -v
v8.9.4

2.清除node缓存（因为楼主我的是安装了指定版本以后发的博文，所以这个命令执行以后的截图就没有了哈）：

sudo npm cache clean -f 

3.安装node版本管理工具（需要安装指定node的话这个命令是必须的）：

sudo npm install n -g

4.安装指定版本node（安装最新版本 sudo n stable 这里不推荐安装最新版本，后面给大家讲）：

sudo n 8.11.3

安装成功以后用node -v 查看版本 如果是和你安装命令的版本一样的话就成功了。

 

下面是重头戏，开始搭建vue项目环境。如果你的node是6+版本的话可以忽略上面，从下面开始。

1.安装vue-cli环境：

npm install -g vue-cli

如果创建不成功报错了的话（如下图：代表你的node版本和vue环境不兼容，给node安装指定版本就好了）

npm ERR! pna.nextTick is not a function
npm ERR! pna.nextTick is not a function

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/dfzxit06/.npm/_logs/2018-10-30T03_36_52_829Z-debug.log

2.创建vue项目（test为项目名称）

vue init webpack test

创建之后会询问一些东西，在此楼主大致讲解下：

? Project name test
? Project description A Vue.js project
? Author 
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No

Project name：项目名称  回车就好

Project description：项目描述 可以修改也可以直接回车

Author：和它的中文含义一样 作者。。。 可输入可回车

Vue build：打包方式 走默认回车就好

Install vue-router：是否安装vue的路由配置

Use ESLint to lint your code：是否使用代码规范（这个根据个人习惯来，如果不想写代码有太多束缚的话可以选择no）

Pick an ESLint preset：规范的风格（根据个人习惯来，刚开始建议none）

Set up unit tests：是否安装单元测试（如果不是必要的话建议选no，要不后期可能很麻烦。。。）

Setup e2e tests with Nightwatch：同上。。。

3.打开刚刚创建的test项目

cd test

4.下载项目所需要的依赖

npm install

5.运行项目

npm run dev

成功之后会看到如下界面：

 

这时，大家会发现项目不是自动运行在浏览器里的，打开/config/index.js，把里面的autoOpenBrowser改成true就可以了，port改成不会和其他端口冲突的就好。