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 脚手架
  demo

• 2、把相应的API实现 SB中跨域

• 3、前后联调
  4、前-->dist-->nginx 80
  后-->jar-->Java-jar xxx.jar 8080

• 创建demo项目

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打开demo目录

• 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 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

• 一个Vue的单页应用（一级路由）的脚手架程序构建

1、进入某个目录如D:\VueStudy
2、通过命令创建项目：vue init webpack demo（后几项都选N）
3、cd进入vue-router-demo1
4、安装依赖：npm install
5、运行：npm run dev
6、更改config目录下的index.js文件，将端口改成80
7、进行一级路由配置

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

• components文件夹建立相应的组件

• 1.Index.vue

<template>
    <div class="container">
        <h2>首页</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:'这是登录页面'
            }
        }
    }
</script>

<style scoped>
</style>