Vue.js vue-router 隨筆（一）

Vue2.0推薦開發環境：

homebrew:Mac系統下的包管理器

node.js: javascript運行環境

npm: Node.js下的包管理器

webpack: Vue組件都是經過.vue等自定義組件沒法被用戶端的各類瀏覽器解析，須要翻譯和打包成js文件

vue-cli: 用來生成模版的Vue工程，其實就是封裝了相似的腳手架

安裝環境：

＃安裝brew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
＃安裝node.js
brew install node
#安裝webpack
npm install webpack -g
#安裝vue腳手架
npm install vue-cli -g
#進入文件目錄
cd 目錄
# 建立模版項目
npm init webpack 項目名稱
#進入項目下面
npm install
#啓動項目
npm run dev

建了一個demo，目錄以下：

app.vue內容：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <ul>
      <li><router-link to="/first">點擊跳轉到第一個頁面</router-link></li>
      <li><router-link to="/second">點擊跳轉到第二個頁面</router-link></li>
    </ul>
    <router-view class="view"></router-view>
  </div>
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      msg: 'Hello Vue!!!'
    }
  }
}
</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>

在component中新建兩個文件：firstcomponent和secondcomponent兩個組件分別爲跳轉的兩個頁面

firstcomponent.vue:
<template>
    <div id="firstcomponent">
        <h2>First Page!!!!</h2>
        <a>written by {{ author }}</a>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                author: "微信公衆號 jinkey-love"
            }
        }
    }
</script>

<style>
    h2{color: red;}
</style>

secondcomponent.vue:
<template>
    <div id="secondcomponent">
        <h2>Second Page!!!!!</h2>
        <a>written by {{ author }}</a>
        <p> 感謝 <a href="https://github.com/showonne">showonne</a>大神的技術指導</p>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                author: "微信公衆號 jinkey-love"
            }
        }
    }
</script>

<style>
    h2{color: green;}
</style>

main.js

import Vue from 'vue' import App from './App' import VueRouter from'vue-router'
import VueResource from 'vue-resource'

// 開啓debug模式
Vue.config.degbug = true; Vue.use(VueRouter); Vue.use(VueResource); // 定義組件
import firstcomponent from './components/firstcomponent' import secondcomponent from './components/secondcomponent'

// 建立一個路由器實例子
const router = new VueRouter({ mode: 'history', base: __dirname, routes: [ { path: '/first', component: firstcomponent }, { path: '/second', component: secondcomponent } ] }) const app = new Vue({ router: router, render: h => h(App) }).$mount('#app') // /* eslint-disable no-new */ // new Vue({ // el: '#app', // template: '<App/>', // components: { App } // })

以上是一個簡單demo，小夥伴們動手試試吧！