构建Vue单页面应用

Vue.js是一套目前比较流行的构建用户界面的渐进式框架，


1.安装node.js
---------------


1.这个可以在网上看教程安装，现在主要是安装vue.js
2.npm包管理器是集成在node中的，所以直接输入npm -v就能查看到版本信息
3.输入npm install -g cnpm --registry=http://registry.npm.taobao.org ，安装淘宝镜像安装相关依赖
4.安装vue-cli脚手架构建工具，输入命令 npm install -g vue-cli，安装完成即可。


2.创建项目
------


1.选定路径，新建一个基于webpack模板的vue项目，vue init webpack project（创建webpack项目并下载依赖）//project是项目名
2.到项目根目录下安装依赖cd project，npm install
3.到项目根目录下运行项目npm run dev


3.引入jquery和bootstrap
--------------------


1.在当前项目的目录下（就是package.json），运行命令 cnpm install jquery --save-dev  这样就将jquery安装到了这个项目中。


(1)`var webpack=require('webpack');`
(2)然后在module.exports的最后加上：

```
plugins: [
 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
     jQuery: "jquery",
     $: "jquery"
 })
]
```

(3)最后在main.js里面引入jquery：
import $ from'jquery'


****vue-cli webpack全局引入bootstrap****
--------------------------------


(1) 首先在项目里面install bootstrap：npm install bootstrap --save-dev
(2) 然后在main.js中引入bootstrap的css和js：

```
import'bootstrap/dist/css/bootstrap.min.css'
import'bootstrap/dist/js/bootstrap.min'
```

4.配置页面路由
--------
App.vue页面
```

<template>
  <div id="app">
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header">
          <h2>Router Basic - 01</h2>
        </div>
      </div>
    </div>
    <div class="row">
        <div class="col-xs-2 col-xs-offset-2">
          <ul class="list-group">
            <!--使用指令v-link进行导航-->
            <a class="list-group-item"><router-link to="/home">Home</router-link></a>
            <a class="list-group-item"><router-link to="/about">About</router-link></a>
            <a class="list-group-item"><router-link to="/contact">Contact</router-link></a>
          </ul>
        </div>
        <div class="col-xs-6">
          <div class="panel">
            <div class="panel-body">
              <!--用于渲染匹配的组件-->
              <router-view></router-view>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: 'app'
}
</script>

```
新建页面
 //   src/components/Home.vue 作为我们的首页
```

<template id="contact">
  <div>
    <h1>Home</h1>
    <p>This is the tutorial about Contact.</p>
  </div>
</template>


<script>
export default {
  '/hello': 'Hello'
}
</script>

```
//   src/components/About.vue

```

<template id="about">
    <div>
        <h1>About</h1>
        <p>This is the tutorial about vue-router.</p>
    </div>
</template>
<script>
export default {
  '/about': 'About'
}
</script>

```
//   src/router/index.js
```

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'


Vue.use(Router)


export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
        path:'/home',
        component:Home
    },
    {
        path:'/about',
        component:About
    }
  ]
})

```