vue-cli的構建+Vue的超級簡單實例(轉)

本文鏈接：https://blog.csdn.net/qq_34320300/article/details/78546141
☞ vue-cli的構建：
0.概要（精華）：

 

# 安裝vue-cli
npm install -g vue-cli

# 使用vue-cli初始化項目
vue init webpack my-project

# 進入到目錄
cd my-project

# 安裝依賴
npm install

# 開始運行
npm run dev

1.新建文件夾目錄。

進入D盤的work文件夾：

$ d:
$ cd: work

新建名為vueProject的文件夾、並查看和進入：

$ mkdir vueProject
$ dir
$ cd vueProject

結果圖：

 

 

 

2.檢測 node.js 和 npm 版本（安裝node.js和npm）

$ node -v
$ npm -v

 

 

 

3.安裝vue-cli腳手架工具，命令(執行要一段時間)：

$ npm install -g vue-cli

 

 

 

4.新建一個vue的項目，名為vueDemo，命令（如果出現錯誤，可能是vue-cli沒有安裝好，重新安裝試試）：

$ vue init webpack vuedemo

再根據參數名（解釋如下），選擇Y/n等。結果圖：

 

 

 

5.進入新建的vuedemo目錄、安裝依賴命令（需要等待一段時間，如果長時間沒有響應，就ctrl+c停止掉，然后再執行一次即可）：

$ cd vueDemo
$ npm install

結果圖：

 

 

 

6.開始運行，命令：

$ npm run dev

結果圖（訪問的網址）：

 

 

 注意：假如8080端口被占用，修改如下文件中的端口號即可。

 

 

 

7.訪問，在瀏覽器中輸入 localhost:端口號。
結果圖：

 

 

 

8.用WebStrom查看已構建的項目：

 

 

 

☞ 構建一個簡單的Vue導航欄菜單實例
1.新建組件文件夾（pages）及文件（index、userCenter、userInfo）：

index.vue代碼：

<template>
　　<div>
　　　　<p>這是首頁</p>
　　</div>
</template>

<script>
　　export default {}
</script>

<style scoped>
12　　 p{
　　　　display: block;
　　　　background: #ffe87c;
　　}
</style>

 

userCenter.vue代碼：

<template>
    <div>
        <p>這是個人中心</p>
        <router-link to="/userCenter/userInfo">用戶信息</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {}
</script>

<style scoped>
    p{
        display: block;
        background: #d6e9c6;
    }
</style > 

 

userInfo.vue代碼：

<template>
　　<div>
　　　　<p>我的名字是：阿水12344</p>
　　</div>
</template>

<script>
　　export default {}
</script>

<style scoped>
　　p{
　　　　display: block;
　　　　background: #77FFFF;
　　}
</style>

 

2.在路由配置文件中，導入新建的組件。（index.js我們不用了）

 

 

router.js代碼：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '../components/HelloWorld'
import Index from '../pages/index'
import UserCenter from '../pages/userCenter'
import UserInfo from '../pages/UserInfo'

Vue.use(Router)

export default new Router({
    routes: [
        {
        path: '/',
        name: 'Hello',
        component: Hello
        },
        {
        path: '/index',
        name: 'index',
        component: Index
        },
        {
        path: '/userCenter',
        name: 'userCenter',
        component: UserCenter,
            children: [
                {
                path: 'userInfo',
                name: 'userInfo',
                component: UserInfo
                }
            ]
        }
    ]
})

 

3.在項目入口App.vue中建立導航欄，代碼如下：

<template>
    <div id="app">
        <img src="./assets/logo.png">
        <p>這可以看做是導航欄</p>
        <router-link to="/index">首頁</router-link>
        <router-link to="/userCenter">個人中心</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
    　　name: 'app'
    }
</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>

 

4.修改mian.js
將

import router from './router'

改為：

import router from './router/router.js'

main.js代碼：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router/router.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
})