路由——vue-cli

• 場(chǎng)景1：中后臺(tái)管理系統(tǒng)
  技術(shù)棧：SpringBoot、vue-cli、SPA、ElementUI
  IDE：WS、VS code、HB

• 場(chǎng)景2：H5前端開(kāi)發(fā)
  技術(shù)棧：vue-cli、SPA、npm、建議自己布局手寫(xiě)樣式
  IDE：WS、VS code、HB

• 場(chǎng)景3：跨端APP開(kāi)發(fā)
  技術(shù)棧：uni-app、Flutter、RN、cordova（調(diào)用底層API）
  IDE：HB、打包成可安裝的APP

• 1、一級(jí)路由 demo 腳手架
  demo

• 2、把相應(yīng)的API實(shí)現(xiàn) SB中跨域

• 3、前后聯(lián)調(diào)
  4、前-->dist-->nginx 80
  后-->jar-->Java-jar xxx.jar 8080

• 創(chuàng)建demo項(xiàng)目

C:\Users\pc>d:

D:\>cd VueStudy

D:\VueStudy>vue init webpack demo

? Project name demo
? Project description A Vue.js project
? Author Invader <2453804076@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

• ctrl+C退出p處理命令

• 用HB打開(kāi)demo目錄

• package.json中修改dependencise

"dependencies": {
        "element-ui":"^2.6.1"
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

config-->index.js修改端口號(hào)

 // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 80, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

• 添加依賴

C:\Users\pc>d:

D:\>cd VueStudy

D:\VueStudy>cd demo

D:\VueStudy\demo>npm install
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

up to date in 20.86s

D:\VueStudy\demo>npm run dev

> demo@1.0.0 dev D:\VueStudy\demo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 12% building modules 22/31 modules 9 active ...VueStudy\demo\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "bab 95% emitting

 DONE  Compiled successfully in 4125ms                                                                          08:54:27

 I  Your application is running here: http://localhost:80

• 一個(gè)Vue的單頁(yè)應(yīng)用（一級(jí)路由）的腳手架程序構(gòu)建

1、進(jìn)入某個(gè)目錄如D:\VueStudy
2、通過(guò)命令創(chuàng)建項(xiàng)目：vue init webpack demo（后幾項(xiàng)都選N）
3、cd進(jìn)入vue-router-demo1
4、安裝依賴：npm install
5、運(yùn)行：npm run dev
6、更改config目錄下的index.js文件，將端口改成80
7、進(jìn)行一級(jí)路由配置

router文件夾的index.js文件
APP.vue

• components文件夾建立相應(yīng)的組件

• 1.Index.vue

<template>
    <div class="container">
        <h2>首頁(yè)</h2>
    </div>
</template>

<script>
    export default {
        name:'Task',
        data(){
            return {
                
            }
        }
    }
</script>

<style scoped>
</style>

• 2.Message.vue

<template>
    <div class="container">
        <h2>登錄</h2>
    </div>
</template>

<script>
    export default {
        name:'Message',
        data(){
            return {
                msg:'這是登錄頁(yè)面'
            }
        }
    }
</script>

<style scoped>
</style>