vue-cli搭建與使用

安裝 vue-cli

cnpm install vue-cli -g

測試是否安裝成功

建立一個基於 webpack 模板的 vue 應用程式

這裡的 myvue 是專案名稱，可以根據自己的需求起名

vue init webpack myvue

一路都選擇no即可;

Project name：專案名稱，預設 回車 即可

Project description：專案描述，預設 回車 即可

Author：專案作者，預設 回車 即可

Install vue-router：是否安裝 vue-router，選擇 n 不安裝（後期需要再手動新增）

Use ESLint to lint your code：是否使用 ESLint 做程式碼檢查，選擇 n 不安裝（後期需要再手動新增）

Set up unit tests：單元測試相關，選擇 n 不安裝（後期需要再手動新增）

Setup e2e tests with Nightwatch：單元測試相關，選擇 n 不安裝（後期需要再手動新增）

Should we run npm install for you after the project has been created：建立完成後直接初始化，選擇 n，我們手動執行;執行結果!

初始化並執行

cd myvue

npm install

npm run dev

vue-cli目錄結構

整合vue-router

命令列中輸入npm install vue-router -g來安裝vue-router，安裝完之後我們可以開啟package.json檔案，在package.json檔案中可以看到vue-router的版本號

在src目錄下新建router資料夾和views資料夾

在router資料夾下新建router.js,並寫入程式碼

//引入vue
import Vue from 'vue';
//引入vue-router
import VueRouter from 'vue-router';
//第三方庫需要use一下才能用
Vue.use(VueRouter)
//引用page1頁面
import page1  from '../views/page1.vue';
//引用page2頁面
import page2  from '../views/page2.vue';
import index from '../views/index';
//定義routes路由的集合，陣列型別
const routes=[
    //單個路由均為物件型別，path代表的是路徑，component代表元件
    {
        path:'/page1',
        component:page1
    },
    {
        path:"/page2",
        component:page2
    },{
        path: "",
        component: index
        //路由巢狀
        // children:[{
        //     path:'/page1',
        //     component:page1
        // }]
    }
]

//例項化VueRouter並將routes新增進去
const router=new VueRouter({
    //如果不配置 mode，就會使用預設的 hash 模式，該模式下會將路徑格式化為 #! 開頭
    //mode: 'history',
//ES6簡寫，等於routes：routes
    routes
});

//丟擲這個這個例項物件方便外部讀取以及訪問
export default router
 

在views目錄下新建三個檔案,index.vue,page1.vue,page2.vue

index.vue

<template>
    <div>
<!--   hash模式、跳轉寫法     -->
<!--        <form action="#/page1" method="get">-->
        <form action="#/page1" method="get">
            <input type="text" name="my-in" id="">
            <input type="submit" value="提交">
        </form>
    </div>
</template>

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

<style scoped>

</style>

page1.vue

<template>
    <div>
        <h1>這是page1</h1>
        <p>{{mag}}</p>
    </div>
</template>

<script>
    export default {
        name: "page1",
        data() {
            return {
                msg: "我是page1的物件"
            }
        }
    }
</script>

<style scoped>

</style>

page2.vue

<template>
    <div>
        <h1>我是page2頁面</h1>
        <p>{{msg}}</p>
    </div>
</template>

<script>
    export default {
        name: "page2",
        data(){
            return {
                msg:"這是page2"
            }
        }
    }
</script>

<style scoped>

</style>

在App.vue新增<router-view></router-view>標籤

修改一下main.js

import Vue from 'vue'
import App from './App'
//引用router.js
import router from './router/router.js'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App)
}).$mount("#app")