路由——vue-cli
场景1：中后台管理系统
技术栈：SpringBoot、vue-cli、SPA、ElementUI
IDE：WS、VS code、HB场景2：H5前端开发
技术栈：vue-cli、SPA、npm、建议自己布局手写样式
IDE：WS、VS code、HB场景3：跨端APP开发
技术栈：uni-app、Flutter、RN、cordova（调用底层API）
IDE：HB、打包成可安装的APP1、一级路由 demo 脚手架
vue-router-demo1
写一下样式2、把相应的API实现 SB中跨域
3、前后联调
4、前-->dist-->nginx 80
后-->jar-->Java-jar xxx.jar 8080
-
创建vue-router-demo1项目
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的单页应用（一级路由）的脚手架程序构建
1、进入某个目录如D:\VueStudy
2、通过命令创建项目：vue init webpack vue-router-demo1（后几项都选N）
3、cd进入vue-router-demo1
4、安装依赖：npm run dev
5、运行：npm run dev
6、更改config目录下的index.js文件，将端口改成80
7、进行一级路由配置
APP.vue
router文件夹的index.js文件
-
components文件夹建立相应的组件
- 1.Index.vue
- 2.Message.vue
