1.Vue环境搭建(2017.10.20)

由于 vue 开发需要使用 npm 工具，而 npm 需要 node.js 支持，故先安装 node.js。而 npm 在使用时可能会很慢，我们可以使用淘宝镜像 cnpm 命令代替。

Node.js : http://nodejs.cn/

淘宝NPM: https://npm.taobao.org/

 

1.安装node.js：

前往node.js官网下载并安装工具(windows见附件node-v8.9.3-x64.msi ; linux见附件node-v8.9.3-linux-x64.tar)，这里安装路径选到 D:\nodejs，安装完毕后在命令行输入以下命令测试是否安装成功，安装正确会出现版本号：

npm  -v

2.安装淘宝npm（cnpm）:

1).输入以下命令安装:

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

2).添加系统变量PATH:

因为cnpm会被安装到 D:\nodejs\node_global 下，而系统变量 PATH 并未包含该路径。在系统变量 PATH下添加该路径即可正常使用cnpm。

3).检查cnpm是否安装成功:

cnpm -v

3.生成vue项目：

首先切换到将要安装vue项目的目录，例如： D:\myvue

1).全局安装vue-cli:    

npm install -g vue-cli

2). 创建一个基于 webpack 模板的新项目 my-project :   

vue init webpack my-project

3).进入项目:    

cd my-project

4).安装依赖:   

npm install

5).启动项目:      

npm run dev

6).访问（具体访问请参考控制台的输出）：

http://localhost:8080/

7).编译（项目开发完成之后执行该操作将生成   dist  目录，将该   dist  目录交付给后台开发人员即可）：

npm run build

注：后台开发人员将该 dist 目录放到后台项目中，然后将后台项目入口软链到该目录中的 index.html 即可。例如在后台是 YII 项目中，将 dist 目录拷贝到项目根目录下，然后再在  protected/ views/site 目录下新建软链(假设入口为SiteController 里面的 actionIndex )：

ln -s  ../../../dist/index.html  index.php

注：如果npm安装很慢，我们可以使用淘宝镜像cnpm命令代替。

1).全局安装vue-cli:   

cnpm install -g vue-cli

2).创建一个基于 webpack 模板的新项目 my-project:  

vue init webpack my-project

3).进入项目:   

cd my-project

4).安装依赖:     

cnpm install

5).启动项目:  

cnpm run dev

6).访问（具体访问请参考控制台的输出）：

http://localhost:8080/

7).编译（项目开发完成之后执行该操作将生成  dist 目录，将该  dist 目录交付给后台开发人员即可）：

cnpm run build

注：后台开发人员将该 dist 目录放到后台项目中，然后将后台项目入口软链到该目录中的 index.html 即可。例如在后台是 YII 项目中，将 dist 目录拷贝到项目根目录下，然后再在  protected/ views/site 目录下新建软链(假设入口为SiteController 里面的 actionIndex )：

ln -s  ../../../dist/index.html  index.php

4.vue项目目录结构：

目录	作用
build	服务器的配置文件和webpack配置文件
config	服务器配置
src	源码文件目录
static	静态文件目录
.babelrc	ES6的配置(不重要)
.editorconfig	字符编码、语法等一些配置(不重要)
.gitignore	上传到git上的忽略文件
.postcssrc.js	postcss配置文件(不重要)
index.html	项目根视图
package.json	项目信息和依赖插件等信息

5.开始之旅：

1). 复制  src\components\HelloWorld.vue 文件，并命名为：Hello.vue，内容修改如下：

<template>   <div>     <p> {{ message }}</p>     <input v-model=" message">   </div> </template> <script>     export default {         name:"Hello",         data(){             return {                  message: 'Hello Vue!'             }         }     } </script> <style> </style>

2).在 src\App.vue里面引入 Hello.vue组件（具体看 红色代码）：

<template>   <div id="app">          <Hello/>   </div> </template> <script> import HelloWorld from './components/HelloWorld' import Hello from './components/Hello'   //引入一个组件，.vue可以省略 export default {   name: 'App',   components: {     HelloWorld,      Hello   } } </script> <style> #app {   font-family: 'Avenir', Helvetica, Arial, sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-align: center;   color: #2c3e50;   margin-top: 60px; } </style>

3).访问页面： http://localhost:8080/

注：下一章的学习尽量都在  Hello.vue 组件里面进行测试。强烈建议在本机安装  git 进行项目管理。