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 <[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打开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 [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\demo>npm run dev

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






  • 2.Message.vue





你可能感兴趣的:(SPA:单页应用)