vue环境搭建 demo项目

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