路由——vue-cli

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

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

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

• 1、一級(jí)路由 demo 腳手架
  vue-router-demo1
  寫一下樣式

• 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)建vue-router-demo1項(xiàng)目

C:\Users\pc>d:

D:\>cd VueStudy

D:\VueStudy>vue init webpack vue-router-demo1

? Project name vue-router-demo1
? Project description A Vue.js project
? Author Invader <1292689963@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打開vue-router-demo1目錄

• 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 vue-router-demo1

D:\VueStudy\vue-router-demo1>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\vue-router-demo1>npm run dev

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

 12% building modules 22/31 modules 9 active ...VueStudy\vue-router-demo1\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īng)用（一級(jí)路由）的腳手架程序構(gòu)建

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

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

• 1.Index.vue
• 2.Message.vue