写给后端同学的vue

lyb-geek

发布于 2019-08-29 17:37:46

9503

发布于 2019-08-29 17:37:46

文章被收录于专栏：Linyb极客之路 Linyb极客之路Linyb极客之路

安装环境

安装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

7.2 构建结果

会在项目目录下生成dist 文件夹，文件夹下的文件就是我们需要的静态文件

我们把打包后的静态文件扔进服务器即可，或者我们用ngxix 部署静态文件，index.html 就是最终指向的入口文件。

10. 补充，使用第三方ui库

作者：Java开发交流来源：https://www.toutiao.com/a6716043760733520398/

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-08-28，如有侵权请联系 cloudcommunity@tencent.com 删除

npm

本文分享自 Linyb极客之路微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度