SPA：單頁應(yīng)用
路由——vue-cli
場景1：中后臺管理系統(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孟岛、打包成可安裝的APP1、一級路由 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修改端口號
// 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
-
一個Vue的單頁應(yīng)用（一級路由）的腳手架程序構(gòu)建
1、進(jìn)入某個目錄如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)行一級路由配置
APP.vue
router文件夾的index.js文件
-
components文件夾建立相應(yīng)的組件
1.Index.vue
2.Message.vue
