vue项目开发环境篇一

最近很流行的vue,公司要开启新的项目打算使用他。最近有了想把自己开发遇到的坑和路程记录一下，好了我一个理科生实在写不下太多文字了。我们直接来吧！！！要是用vue开发有两种方式一种是引入一种是安装Node.js 构建工具，我使用的是后面的一种方式，首先我们要去下载nodejs,然后安装它，这是下载nodejs的网址给大家http://nodejs.cn/

安装node的步骤很简单就是一路next,是不是很简单。要是还不会的，百度一下有很多教程了。安装好后我们可以检查一下是否安装成功，管理员运行cmd输入node -v

我们可以看到我们安装时v7.5.0版本的node，因为npm install是使用了国外的网，我们可以把npm服务地址变更为淘宝cnpm，提高下载速度。

管理员运行cmd输入https://npm.taobao.org/badge/v/cnpmjs.org.svg

安装webpack。

管理员运行cmd输入：npminstall webpack -g

安装后默认路径：C:\Users\like\AppData\Roaming\npm\node_modules

安装vue。

管理员运行cmd输入：npminstall vue -g

安装后默认路径：C:\Users\like\AppData\Roaming\npm\node_modules

 

安装vue-cli脚手架。

管理员运行cmd输入：npminstall vue-cli -g

安装后默认路径：C:\Users\like\AppData\Roaming\npm\node_modules

到这里开发环境就安装好了，接下来我们要安装开发工具了。

前端开发工具：webStrom。

下载地址：https://www.jetbrains.com/webstorm/

激活方法：选择License server。输入验证地址：http://idea.imsxm.com/

webStrom安装vue.js插件。

file-settings-plugins-联网搜索：vue.js-安装-重启webStrom。

 

webStrom配置vue文件模板。

file-settings-editor-file and code templates-新增模板，name=vue，extension=vue。

模板内容输入以下内容，新建vue文件时可自动创建标签。

<template>

 

</template>

 

<script>

 

</script>

 

<style>

 

</style>

 

webStrom中vue文件打开类型。

file-settings-editor--file types-选择vue.js templates后，registered patterns项新增内容：*.vue。

上面这些都安装完后，我们开发vue的前奏就准备好了。