vue 环境安装

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我就不详细介绍了，网上自己去百度，反正后面要安装的一系列的依赖或者包都要用到这个。

即使你不使用vux的代码, 但能从源码得到一些参考那么也是件让人高兴的事情。

基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。

vux-loader保证了组件按需使用，因此不用担心最终打包了整个vux的组件库代码。

vux并不完全依赖于WeUI，但是尽量保持整体UI样式接近WeUI的设计规范。最初目标是创建一个易用，实用，美观的移动端UI组件库，现在离理想状态还有不少距离，因此需要大家及时反馈问题及贡献代码。

一   （nodejs 中文社区 http://cnodejs.org/）

 安装node.js 环境 ， 下载 地址 

https://nodejs.org/en/download/

选择对应的版本下载安装 ，  Windows Installer (.msi)  32bit   搂主安转的。

 安装完成后 ， 在 cmd 命令行中输入 node -v 查看版本号 ， 输入npm -v 可以看到 安装的路径 还有版本号。

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

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

    1、启动CMD依次执行以下两条命令
npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"
有可能权限不够 试试使用以管理员身份运行 cmd
2、设置环境变量：
NODE_PATH = C:\Program Files\nodejs
PATH = %NODE_PATH%\;%NODE_PATH%\node_modules;%NODE_PATH%\node_global;

这样就可以把后面全局安装的装到global里并且可以直接用命令使用。

二    cnpm的安装

安装完node之后，npm包含的很多依赖包是部署在国外的，在天朝，大家都知道下载速度是超级慢啊。所以我们要安装cnpm，cnpm是淘宝对npm的镜像服务器，这样依赖的包安装起来就快多了。
安装命令为：npm install -g cnpm --registry=https://registry.npm.taobao.org

有可能权限不够 试试使用以管理员身份运行 cmd

三  

   安装全局  webpack+vue-loader+vux     vue-cli 工具

    命令输入

npm install -g  vux --save 安装或者更新  vue

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

安装 webpack

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

当然如果常规项目还是把依赖写入 package.json 包去更人性化：

     cnpm init

  cnpm  npm install webpack --save-dev  

 3 (npm)npm install -g webpack-dev-server             //安装webpack的本地webserver    为了热替换

没有安装 vue-loader之后再创建vue 的项目是 会选择是否使用 初始化 vue-loader 和一系列的项目 使用的参数。如图

 
 

  
  # 全局安装 vue-cli
 
 
 
 

  
  $ npm install --global vue-cli
 
 
 
 

  
  # 创建一个基于 webpack 模板的新项目           这个是使用 vue-cli 工具和 airyland/vux2 模板快速初始化项目，默认为 webpack2 模板
 
 
 
 

  
  $ vue init webpack my-project               
  
   （
  
  vue init airyland/vux2 projectPath    
  
  ）
 
 
 
 

  
  # 安装依赖，走你
 
 
 
 

  
  $ 
  
  cd my-project
 
 
 
 

  
  $ npm install
 
 
 
 

  
  $ npm run dev      
  
  启动项目
 
 

项目成功 

         

查看项目结构

运行别人的vue.js项目domo

可以从github上克隆下来，然后将项目文件夹放到某个盘符下，然后cmd命令 找到该盘符，比如 f:

f:\cd domo_vue

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

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