vue开发环境的搭建安装操作手册——七步搞定

现在vue.js那么火热，即使你公司不是用vue.js框架的，你自己也想学习一下了解一下提升以下吧？可是在使用vue.js之前是要搭建开发环境的，为什么要搭建运行环境？不搭建不行吗？直接使用<script>标签引入就可以了啊。你说的也对，那是在开发web的时候可以这么做，不过在开发小程序，app的时候，就不行了，因为小程序和app是不能使用JavaScript和html5开发的啊。因为Node.js是运行在服务器端的JavaScript，又因为vue.js需要依赖node.js和node的nmp工具来实现，所以算不懂java也可以使用vue.js开发。

一、下载node.js

到官方网址去下载安装：https://nodejs.org/en/download/

二、安装node.js

下载完之后，在该安装目录下按住【shift】+鼠标右键然后你就会看到“从此处打开命令窗口”，点击就可以打来命令输入。

输入：node -v 

用于检查是否安装成功node.js，返回的是版本号。

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

是安装国内淘宝npm镜像，因为担心node.js的自带的镜像慢。

三、安装全局vue-cli脚手架

vue-cli脚手架有什么用？为什么要安装。其实vue-cli框架，封装了组件模块等。在项目中直接拿过来用就可以了。

输入命令：cnpm install --global vue-cli

安装好了：

四、创建项目

我在VS Code 里面新建项目然后使用刚刚的方法【shift】+鼠标右键调出“从此处打开命令窗口”然后安装依赖，输入运行似乎行不通。

是我想的太简单了，原来要基于打包工具创建项目，用命令创建项目还会把环境下载到目录下。我是基于webpack，所以输入命令：

vue init webpack tmall

然后npm就会有一系列问题问你，按照需求，输入yes或者no按回车。然后等待，创建万完项目就会看见一个项目文件夹了。

五、安装依赖

因为在项目中，各个vue模版是相互依赖的，所以要安装依赖。

进入项目中，使用上面的方法，调用出cmd没，然后输入命令。

cnpm install

六、修改项目默认地址

因为在调试项目的时候，很多项目地址的默认端口都是8080，所以我们最好就在运行之前改以下，避免带来不必要的麻烦，以为哪里错了自己吓自己。

在项目的根目录下，有一个config的配置文件目录，打开index.js，修改里面的8080的端口。

七、运行项目

搭建好环境之后，来测试一下是否能够运行。

输入命令：cnpm run dev

然后就开始加载文件了，加载完之后就返回一个地址，就是你刚刚设置过的测试地址。在浏览器中输入地址，Oh yearh~~可以了