2019-04-17

SPA：单页应用

路由——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、打包成可安装的APP

• 1、一级路由 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 <[email protected]>
? 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 [email protected] requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

up to date in 20.86s

D:\VueStudy\vue-router-demo1>npm run dev

> [email protected] 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