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

Posted 王小宾

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于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.最后修改右上角的

技术分享图片

 

技术分享图片

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

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

 


以上是关于基于webpack搭建vue-cli以及webstorm的设置的主要内容,如果未能解决你的问题,请参考以下文章

搭建vue-cli项目和打包项目

基于vue-cli搭建vue项目开发环境

基于Vue+Vue-cli+webpack搭建渐进式高可维护性前端实战项目

基于vue-cli-和element-ui的开发admin

vue-cli 搭建多页面

使用vue-cli+webpack搭建vue开发环境