vue-cli腳手架

vue-cli腳手架

1 安裝

    cnpm install vue-cli -g

2 初始化項目

    vue init webpack projectName

3 運行項目

    npm run dev
    修改端口運行
    PORT=8089 node ./build/dev-server.js

vue組件

1 在一個組件中使用另外一個組件須要是哪一個條件

使用import命令將該組件導入

在父組件中的components裏面註冊該導入的組件

在父組件中的template裏面 使用組件標籤調用

vue-router路由使用

1 安裝vue-router

    cnpm install vue-router --save-dev

2 在main.js中 導入並使用vue-router

    import VRouter from 'vue-router'
    //使用
    Vue.use(VRouter)

3 定義路由，注意，路由中涉及到的相關組件須要提早用import 載入

    import Home from '@/page/home'
    import News from '@/page/news'
    let router = new VRouter({
        routes:[
            {path:'/home',component:Home},
            {path:'/news',component:News}
        ]
    })

4 在根組件中加入 配好的 router

        new Vue({
          el: '#app',
          router,
          template: '<App/>',
          components: { App }
        })

5

        在跟組件中 App.vue中 加入<router-view></router-view>，肯定顯示區域

6 在瀏覽器訪問以下路徑測試

        localhost:8080/#/home
        localhost:8080/#/news

7 路由改造 route/index.js

        import Vue from 'vue'
        //路由相關
        //載入vue-router
        import VRouter from 'vue-router'
        //使用
        Vue.use(VRouter)
        //導入模塊
        import Home from '@/page/home'
        import News from '@/page/news'

        export default new VRouter({
            routes:[
                {path:'/home',component:Home},
                {path:'/news',component:News}
            ]
        })

        main.js

        import router from '@/route/index'