美文网首页
Vue快速上手(一)Vue安装与结合webstorm开发

Vue快速上手(一)Vue安装与结合webstorm开发

作者: 鲁狂歌 | 来源:发表于2020-02-20 10:06 被阅读0次

在开篇介绍中,我大致列了5个章节,现在开始第一个vue的安装,特别是结合webstorm的使用。

我在第一次完成安装vue之后,打开webstorm创建vue项目,出现创建之后无反应,长时间等待无结果的情况,因此,这一篇中我将从安装vue开始,在webstorm打开,并创建项目运行起来结束。

我这里以Windows10为例,Mac后续酌情再补上~

Vue的安装

官方提供了cdn和npm安装两种方式,并且提到CLI脚手架。我个人是习惯是能用脚手架就是用脚手架,什么方便大型项目、了解作者思想……对我来说就是一个字,懒,有人家创建好的结构直接拿来用就是了。

具体CLI的介绍大家到官网自己看就可以了,地址在这里:https://cli.vuejs.org/zh/guide/

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,……致力于将 Vue 生态中的工具基础标准化。~ ~大家自己看就好了

安装nodejs

安装nodejs,下载地址:http://nodejs.cn/download/;具体安装过程就不写了。

安装完成在命令行里面查看下版本,命令如下:

//查看nodejs版本

node -v

//查看npm版本

npm -v 

这里推荐大家直接替换npm的镜像源,官方源的下载速度实在太慢,安装一个小module可能要等半天。

替换npm镜像源为淘宝镜像

npm config set registry https://registry.npm.taobao.org

//查看是否替换成功可以用

npm info express

前面说了,我比较懒,所以一次配置好,后面不出意外不会调整。所以临时配置的方式我就不写了。

或者,也可以使用cnpm也可以

npm install -g cnpm --registry=https://registry.npm.taobao.org

//安装的时候用

cnpm install [name]

安装webpack和vue脚手架vue-cli

webpack是什么?

简单说就是一个打包器,vue使用webpack就是为了使用模块化编写代码。官网在这里,想要深入研究的可以自行了解:https://www.webpackjs.com/

//安装webpack

npm install webpack -g

//安装vue

npm install vue -g

//安装vue-cli脚手架

npm install vue-cli -g

以上,安装vue完成。我们可以直接创建vue项目了,但是我习惯用IDE,所以选择webstorm,至于下载、安装大家自己来就可以,也不要问我要注册码(* ̄▽ ̄*)/

在webstorm创建vue项目

这时候如果要直接使用webstorm创建vue项目,是有问题的。例如下面这种,打开webstorm,创建vue项目:

这样直接在webstorm中创建项目会出现下面这种等待框,一直等待,没有结果的。所以,不要这么傻等。

怎么办?还要安装Git,下载https://git-scm.com/downloads ,安装git之后,webstorm创建vue项目非常顺利。

或者也可以在webstorm--new project之后,在命令行中运行vue init webpack,在webstorm中构建,然后就是一路yes就可以(我使用的时这种,简单,速度快)。

运行npm run dev

在浏览器打开 http://localhost:8080查看,如下效果,表示webstorm创建vue成功了。

以上,vue安装以及在webstorm中安装项目已经完成。

下面是我遇到的几个问题,我选了3个需要注意的,如果后面再有其他问题,我会在本篇后面继续增加。

注意1:

使用上面vue init webpack构建项目之后,原webstorm创建vue的进度依然没停止,仍在继续(如下图所示),直接点击右上角的停止按钮结束就可以,或者不理睬它,继续让他构建,最终不会影响我们的项目。

注意2:

在vue init webpack构建时,在ESLint这一项可以 选择no,如果选择了yes,那么在编写代码时经常会出现莫名的错误(主要是各类空格不合规范,很烦人),可以从build--webpack.base.conf.js中将其关闭,如下:

注意3:

配置webstorm运行vue项目,通常来说按上面的方式安装完成之后,直接用webstorm运行是会提示edit,我们需要将其改为dev方式,如下:

相关文章

网友评论

      本文标题:Vue快速上手(一)Vue安装与结合webstorm开发

      本文链接:https://www.haomeiwen.com/subject/htgafhtx.html