基于webpack搭建vue-cli以及webstorm的设置

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.最后修改右上角的

备注：为什么必须修改名称？之前波哥未修改名称，造成点击启动项目时启动三次。而且不时的刷新。最后发现是没有修改名称造成的。

到此处，项目的搭建，以及你本地代码已经可以正常的运行，修改，提交了！