vue cli 框架搭建

=============== 通知：

博主已迁至《掘金》码字，博客园可能以后不再更新，掘金地址：https://juejin.im/post/5a1a6a6551882534af25a86b  请多多关照！！

-------------------在此谢过！-----------

 

 

 

在命令行安装，需要先安装node环境 ，npm 环境, webpack环境

 

　　　　在下载vue的时候需要先确认以下几点是否存在：

　　　　　　　　验证node是否安装:

　　　　　　　　　　　　node -v

　　　　　　　　验证npm是否安装：

　　　　　　　　　　　　npm -v

 

安装node:

　　Windows 安装包(.msi)

　　32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

　　64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

 

安装webpack:

 　　　　 $ npm install webpack -g

安装npm:

 现在安装node就会自带npm的安装，并不需要另外安装

　　git下载地址：

　　　　 $ git clone --recursive git://github.com/isaacs/npm.git  

     

（一般npm环境下载速度较慢。可以下载淘宝镜像cnpm来提高速度，但有时两者下载的文件版本会有细微差别）

　　淘宝镜像： http://npm.taobao.org/

     命令：

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

 

  安装vue脚手架: vue-cli

     命令：

          　  $ cnpm install vue-cli -g

 

    检测vue版本：

              $  vue --version

 

使用webpack 搭建项目实例：

 

　　webpack完整版：

        　　  $ vue init webpack demo

 

      webpack 简约版：

               $ vue init webpack-simple demo

 

　　进入项目目录：

       　　   $ cd demo

 

　　下载安装依赖：

   　　　　 $ cnpm install 

 

　　下载完成后启动vue项目：

　　　　　$ npm run dev

 

      下载安装vue router:

              $ npm install vue-router --save

 

      下载安装Sass (关于sass/less在vue中的配置和使用会在接下来的文章详细说明)

            $ npm install node-sass --save  

           

      下载安装axios:

             $ npm install axios --save

 

        下载vue ui框架iview：

           $ npm install iview --save

 

　　　项目打包：

   　　　 $ npm run build

 

 

                 完