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.jsbrew install node#安装webpacknpm 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，小伙伴们动手试试吧！