N1.检查本地电脑是否安装node和npm
安装vue-cli的前提是已经安装了npm
是否安装npm检查命令
npm -v
如果出现版本号，说明已经安装了npm
查看node版本号
node -v
如果未出现上述情况，请前往官网下载稳定版本，也可以点右边的穿梭机下载，目前vision用的node版本是 8.9.3 走你--node下载
注意：可以直接在官网上下载8.9.3版本覆盖你本地的版本，安装之后运行npm -v可能会出现如下错误。
解决方法：
删除目录下"C:\Users\你的用户名\AppData\Roaming\npm\node_modules"文件下的npm文件就可以了！！
安装webpack
首先查看是否已经全局安装了webpack
webpack -v
如果出现版本号，表示已经成功安装了webpack，目前vision项目用的是3.10.0版本
否则需全局安装webpack
npm install -g webpack
N2.安装vue-cli脚手架工具
首先 查看电脑是否已经全局安装了脚手架工具（注意，此处查看是大写 V）
vue -V
未出现版本号则需要全局安装vue-cli
npm install vue-cli -g
使用vue -V 检测是否成功安装到计算机
N3.初始化项目（此处是熟悉vision项目详细搭建流程，可以跳过）
使用 vue init 命令来初始化项目
vue init <template-name> <project-name>
<template-name>：表示模板名称，其中vue-cli提供了5种模板
1.webpack：全面的webpack+vue-loader的模板，功能包括热加载，检测和css扩展等。
2.webpack-simple:简单的webpack+vue-loader的模板，但是不包含其他功能。
3.browerify
4.browerify-simple（由于我们不使用browerify此处就不写了）
5.simple：最简单的单页面应用模板
由于我们的vision项目是基于webpack来的，所以选择webpack模板作为开发模板
<project-name>:项目名称。要注意名称不可以大写，至于原因这里不介绍，可以看一下阮一峰大神的总结. 为什么文件名要使用小写
介绍完模板，到此步骤已经可以搭建基于vue-cli脚手架的项目了
这里由于盼哥已经在远端搭建了vision项目，所以我们的项目已经有了名称，就是vision！是不是很高大上？
所以 我们就直接 vue init webpack 就可以了！
命令：
vue init webpack
Project name:项目名称，直接回车。
Project description:项目描述，默认为 a vue.js project
Author:作者
Install vue-router?是否安装vue路由插件，这里我们要使用，选择Y
Use ESLint to lint your code?是否使用ESLint来限制你的代码错误和风格。经过讨论我们决定不使用。原因有两点：
1.之前没使用过，查询一些资料这个限制甚至会限制单引号和双引号的使用。
2.怕影响效率。
Set up unit tests:是否需要安装单元测试工具 N
Setup e2e tests with Nighwatch? 是否安装e2e来进行用户行为模拟测试 N
接下来就可以使用 npm run dev运行项目了！
N4.分析vue-cli模板以及修改部分内容（可以直接下一步）
这里有一篇讲解非常、非常、极其、特别、厉害的文章，望仔细看一下！ vue-cli#2.0 webpack配置分析
build --编译任务的代码
config –webpack的配置文件
package.json–项目的基本信息
运行项目默认的端口号是8080，但是该端口容易被占用。为了防止出现没必要的问题，我这里修改了端口号改为8777。当然如果你想改一个自己喜欢的端口号，可以进入
config/index/js找到端口号，直接修改就行了！
N5.注意事项
我们项目从远端git clone 到本地的，是没有node_modules，也就是所谓的依赖的。
在clone下来的vision项目下：
cd vision
npm install
安装完毕之后文件中会有一个node_modules文件。这时执行npm run dev就可以运行vision项目了！如果你没有运行成功，记得叫人。
N6.axios
vue官方推荐使用axios来发送和请求数据，因为官方不在继续维护vue-resource,而之前我们的package.json中是没有安装axios的
命令：
npm install axios --save
思考：
1.安装其他插件时可以直接使用Vue.use()来使用，然而axios不可以。
目前有三种方法可以解决：
第一种：每个.vue文件都引入axios，这个方法就是麻烦，但是好用。
第二种：直接修改axios原型链。该方法目前还没尝试。尝试之后在此处修改。
第三种：结合Vuex使用，也就是封装一个action代码块。由于目前我们正在使用vuex，这个方法也在考虑中。
N7使用webStorm来运行vision项目
1.前往官网下载webstorm。激活码 走你
2.clone代码，下载依赖包 执行npm run dev来尝试代码是否可以运行成功
3.安装vue插件，在webstorm的plugins搜索vue，并且安装插件
4.将Es5.1改为Es6，webStorm默认支持的是Es5.1版本,如果不修改就会这样
5.安装gerrit插件，公司使用gerrit，这个必须要安装。
安装方式同第三步一样。
6.安装之后打开本项目.git文件。.git文件是隐藏的，需要想办法让他显示出来。
首先下载commit文件，否则会提交不上去你的代码commit-msg
cd vision
ls -a
open .git
打开里面的hooks文件，把下载好的文件放进去就ok了！具体参考盼哥写的 Gerrit使用流程+pycharm配置
7.最后修改右上角的
备注：为什么必须修改名称？之前波哥未修改名称，造成点击启动项目时启动三次。而且不时的刷新。最后发现是没有修改名称造成的。
到此处，项目的搭建，以及你本地代码已经可以正常的运行，修改，提交了！
原文地址：https://www.cnblogs.com/chinabin1993/p/8134841.html