vue.js在windows本地下搭建环境和建立项目。

    Vue.js是一套构建用户界面的渐进式框架。与其余重量级框架不一样的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，而且很是容易学习，很是容易与其它库或已有项目整合。另外一方面，Vue 彻底有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

    首先vue.js的做者是中国人，因此说他是国产的，吸取了google的angular.js和facebook的react.js的特性，摒弃了jquery传统的DOM操做，采用数据绑定和指令等概念，能够说是将来WEB端开发的趋势，可是也并不表明jquey就淘汰了，存在即合理，jq应该在之后会有其余领域的价值，这里我就很少说了。

    说了这么多，咱们仍是开始怎么搭建vue.js的环境吧。首先要搭建vue的环境须要借助node.js的npm的包管理器。这个npm我就不详细介绍了，网上本身去百度，反正后面要安装的一系列的依赖或者包都要用到这个。

    1、node.js的安装

    node.js近几年很火热，开始我觉得是一门语言，其实只是一个平台，他封装了chorme v8的引擎，能够直接用js做为服务器端脚本语言。http://nodejs.cn/进去该网站下载最新版本的node,

注意npm版本是3.8以上的就行。后面就是下一步下一步的安装就能够了。安装完成后，wind+r  弹出cmd，输入node -v 和 npm -v  分别查看版本号，表明node.js安装完成。说到这里博主我遇到过问题了。

    由于我电脑我安装过appcan-v3.3,这款IDE封装了node.js而且装的时候把node.js的环境变量给配好了，以致于我后来新装的node.js查看版本号都是低版本的。解决方法其实很简单，打开个人电脑查看属性/高级系统设置/环境变量。而后找到"appcan_path"点击编辑,把“F:\set-soft\AppCanStudioPersonalV3.3\HDK\emulator\mas\”全都删除，而后从新查看版本。v3.10.4的npm便可。（也能够设置全局文件夹，直接采用默认的，那node会全都装在根目录下的node_modules，目前里面只有npm就对了，tips:若是你第一次设置了全局文件夹而且卸载了node,那么你后面再从新安装node.js还会有这个设置，我是没管，具体解决方案能够百度）

 

    2、node.js的环境变量的新建。

    其实安装完node，就自动在path里增长环境变量，可是为了之后的本地部署项目，咱们须要找到node.js的安装根目录，在当中新建“node_global”和"node_cache"两个文件夹。

    一、启动CMD依次执行如下两条命令
npm config set prefix "F:\set-soft\nodejs\node_global"
npm config set cache "F:\set-soft\nodejs\node_cache"

二、设置环境变量：
NODE_PATH = F:\set-soft\Node\nodejs
PATH = %NODE_PATH%\;%NODE_PATH%\node_modules;%NODE_PATH%\node_global;

这样就能够把后面全局安装的装到global里而且能够直接用命令使用。

3、安装淘宝的npm镜像：

    输入npm install -g cnpm –registry=https://registry.npm.taobao.org，便可安装npm镜像，之后再用到npm的地方直接用cnpm来代替就行了。这个其实看我的爱好吧，由于npm在国内下载速度是很慢，因此就用npm下载安装cnpm能够更快的下载后面的依赖等等。

4、安装全局vue-cli脚手架、webpack.

    命令输入1.(npm)cnpm install -g vue-cli                       //全局安装vue-cli

    2.(npm)cnpm install -g webpack                          //全局安装webpack

    (npm)npm install -g webpack-dev-server             //安装webpack的本地webserver

安装完成后，vue-cli脚手架其实就已经把vue也装掉了，因此只需输入vue -V 和 webpack -v  等等就能够查看安装成功与否。

五，新建vue.js项目

    新建的话，能够在当前系统盘下直接新建，也能够切换盘符，而后在当前的磁盘里新建文件项目

命令 vue init webpack vue_project(最后这个是我建立的项目文件夹的名字)

看到上面的就表明已经完成，而后就去当前的磁盘里找到“my_test”你的项目文件夹，里面使用了脚手架vue-cli的和webpack提供的模板进行了建立。目录结构大概是这样

6、本地安装和运行项目

1.注意前面的盘符是当前的，而后命令cd my_test     //进入文件夹

..回车输入  cnpm install   你会发如今已经建立的项目结构里面会多出一个node_modules的文件夹，里面就是刚才安装的全部依赖。

3.4.准备工做作好之后，测试一下项目里面默认的app.vue模块可否跑起来，这是须要先安装一下服务器环境，在命令行中输入 
cnpm run dev 回车便可 

8080就是默认的端口，在浏览器地址栏中输入localhost:8080会发现默认的模块打开了！

(这里博主我又遇到过问题，就是个人8080端口被占用了，解决方法是，cmd命令输入netstat -ano找到8080端口的PID，而后打开“人物管理器”，找到对应的PID，将该进程给关了便可，个人是svn服务端软件给占了。)

最后打开浏览器:127.0.0.1:8080出现这个

就表明vue.js在本地就建立好了。

7、运行别人的vue.js项目domo

能够从github上克隆下来，而后将项目文件夹放到某个盘符下，而后cmd命令 找到该盘符，好比 f:

f:\cd domo_vue

命令 cnpm(npm) install    //在本地安装

最后  cnpm(npm) run dev   回车   //在本地的浏览器打开127.0.0.1带上端口号就能够跑起来了。

 

8、服务器端运行

 npm run build   

会生成静态文件，在根目录的dist里，里面有个index.html，这是服务器访问的路径指定到这里就能够访问咱们本身的项目了。可是我发现个问题就是生成index.html里引用的css和js的引用路径不对，这时候就须要本身修改一下配置了。

进入config/index.js

原来的配置的引用路径为

 

整个vue.js项目就可搭建完成。