基于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.最后修改右上角的
备注:为什么必须修改名称?之前波哥未修改名称,造成点击启动项目时启动三次。而且不时的刷新。最后发现是没有修改名称造成的。
到此处,项目的搭建,以及你本地代码已经可以正常的运行,修改,提交了!