写给后端同学的vue

安装环境 安装vue-cli 脚手架 1. 安装nodejs环境

下载地址： (nodejs)[https://nodejs.org/zh-cn/download/]

安装(略)

2. 安装vue-cli系列工具

npm install -g @vue/cli

npm install -g @vue/cli-service-global

3. vue create hello-world // 用vue 初始化hello-world 项目 3.1 vue create hello-world 3.2 跑起项目 npm run serve

很多后端同学的用的编辑器是 idea, 我这里也用idea演示这个,细节之处不是本文的重点，可查看 idea创建vue项目
打开刚才初始化后的项目

配置启动脚本，相对于配置java 的脚本要简单的多

启动：

访问地址

3.3 项目目录介绍：

node_modules , 项目依赖的模块包，我们需要的模块包都会下载到这个目录下，我们开发时不用管

public 静态文件放的位置，放一下大的静态文件

src 项目的源文件

assets 小的静态文件

components 组件，一些公用的组件，比如登录框，输入组件等

APP.vue vue项目的根组件

main.js 项目的主入口文件，一些需要的基本的js css 可在这里引入

package.json 项目依赖、介绍、基本配置等的清单文件，我们只需要看，scripts 里面的执行命令即可， 比如serve ->启动， build -> 构建打包

其他 项目运行配置文件，可忽略

Tips：上面的内容了解即可，可不用深入，继续往下添加页面路由

4. 增加路由vue-router 4.1 安装路由 npm install vue-router -S

使用

4.2 在项目文件夹下新建router.js 4.3 写入代码

import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld from './components/HelloWorld'; Vue.use(Router); export default new Router({ mode:'history', routes: [ { path: '/helloworld', name: 'HelloWorld', component: HelloWorld } ] }) 4.4. 新建page文件夹，文件夹下面的都是为页面 .vue文件

4.5 修改router.js import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld from './components/HelloWorld'; import Index from './page/index'; import List from './page/list'; Vue.use(Router); export default new Router({ mode:'history', routes: [ { path: '/helloworld', name: 'HelloWorld', component: HelloWorld }, { path: '/index', name: 'Index', component: Index }, { path: '/list', name: 'List', component: List }, ] })

访问路由：

5. 增加axios， http请求库 (https://www.kancloud.cn/yunye/axios/234845) 5.1 安装库 axios , npm install axios -S 5.2 使用

以上面的list.vue 文件为例：

<template> <div> <h3>这是一个list 页面</h3> <ul> <li> <router-link to="/index">Index</router-link> </li> </ul> <h3>下面是axios请求到到数据</h3> <ul v-if="userList.length"> <li v-for="item in userList" :key="item.id"> 姓名：{{item.name}} </li> </ul> <ul v-if="!userList.length"> loading.... </ul> </div> </template> <script> import axios from 'axios'; export default { name: "Index", data(){ return { userList: [] } }, created () { axios('http://localhost:4000/get/alluser') .then(res => { this.userList = res.data.users; }) } } </script> <style scoped> ul li { list-style: none; font-size: 16px; } </style> 6. 增加脚手架可配置文件 vue.config.js

设置接口的跨域，vue-cli 启动的服务端口等

module.exports = { devServer: { port: 8090, proxy: 'http://localhost:4000' } } 7. 打包项目 7.1 执行命令 npm run build