vue是基于node.js开发而来的,所以首先下载node.js
选择Windows Installer 64bit版本 新建一个文件夹放nodejs,安装过程不赘述
安装完成后,npm也带着安装了
在安装目录下创建node_cache和node_global文件夹 如图所示
这2个文件夹主要放全局性的模块,比如vue,webpack,和项目的依赖没关系
打开cmd 设置npm
npm config set prefix "nodejs安装目录\node_global"
npm config set cache "nodej安装目录\node_cache"
修改下载源为淘宝镜像
npm config set registry https://registry.npm.taobao.org
查看npm配置列表
npm config list
修改完成后,不需要再使用cnpm
环境变量配置
1.用户变量-path C:\Users\用户名\AppData\Roaming\npm 修改为 nodejs安装目录\node_global
2.系统变量-新建 NODE_PATH nodejs安装目录\node_global\node_modules
3.系统变量-path 添加%NODE_PATH%
安装vue
npm install vue -g
安装webpack
npm install webpack -g
安装webpack-cli
npm install webpack-cli -g
查看版本
webpack -v
安装vue-cli
npm install @vue/cli -g
查看版本
vue --version
安装vue-router
npm install vue-router -g
至此,创建vue项目所需要的环境已设置完成
创建vue项目
建立工作目录,cd进入
创建demo项目
vue create demo
选择手动设置功能
选择功能
项目创建完成
下载安装vscode,导入demo项目
项目结构如下
node_modules里放的都是该项目的依赖包
package.json是依赖描述文件,类似maven的pom.xml
刚刚创建的项目,创建的时候已经把依赖安装了,这里就不用再重复安装
如果项目是从git拉下来的,需手动执行npm i来安装依赖
安装需要用到的组件
vue-axios(网络请求组件)
npm i axios --save
npm i vue-axios --save
element-ui(ui封装组件)
npm i element-ui
App.vue中注掉默认的标签
<template>
<div id="app">
<!-- <nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav> -->
<router-view/>
</div>
</template>
main.js中引入添加的组件
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from "element-ui";
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.config.productionTip = false
Vue.use(ElementUI, {
size: "small",
menuType: "text"
});
window.axios = axios;
Vue.use(VueAxios, axios);
new Vue({
router,
render: h => h(App)
}).$mount('#app')
修改vue.config.js 配置代理解决跨域
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
'/demo-api': {
target: 'http://localhost:6018',
changeOrigin: true,
pathRewrite: {
'^/demo-api':''
}
}
}
}
})
在src/views下创建TableDemo.vue
<template>
<el-table :data="list" border style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
list: []
}
},
created() {
this.getList()
},
methods: {
getList() {
return axios({
url: '/demo-api/list',
method: 'get'
}).then(res => {
this.list = res.data
console.log(this.list)
})
}
}
}
</script>
<style></style>
在src/router/index.js添加路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import TableDemo from '../views/TableDemo.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
{
path: '/tableDemo',
name: 'tableDemo',
component: TableDemo
}
]
const router = new VueRouter({
routes
})
export default router
项目的package.json
{
"name": "demo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"axios": "^1.1.3",
"core-js": "^3.8.3",
"element-ui": "^2.15.10",
"vue": "^2.6.14",
"vue-axios": "^3.5.2",
"vue-router": "^3.5.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"vue-template-compiler": "^2.6.14"
}
}
后端接口地址
http://127.0.0.1:6018/list
后端接口代码
@Data
@Builder
private static class DemoUser{
private String name;
private String address;
private String date;
}
@GetMapping("list")
public List<DemoUser> list(){
List<DemoUser> users = new ArrayList<>();
users.add(DemoUser.builder()
.name("王小虎")
.address("上海市普陀区金沙江路 1516 弄")
.date("2016-05-01")
.build());
users.add(DemoUser.builder()
.name("王一虎")
.address("上海市普陀区金沙江路 1517 弄")
.date("2016-05-02")
.build());
users.add(DemoUser.builder()
.name("王二虎")
.address("上海市普陀区金沙江路 1518 弄")
.date("2016-05-03")
.build());
return users;
}
启动服务
npm run serve
浏览器访问
http://localhost:8080/#/tableDemo