vue环境搭建以及引入组件配置环境ｖｕｅ　前端环境搭建首先需要安装淘宝镜像 - npm config set regi

ｖｕｅ　前端环境搭建

首先需要安装淘宝镜像 - npm config set registry registry.nom.taobao.org

然后引入ｖｕｅ－ｃｌｉ框架

输入命令 npm install -g @vue/cli

vue create xxxx (首先选好磁盘，例如 d:)

创建完成框架后，就可以添加项目需要的组件

例如：elementui, router 等等..

npm i element-ui -S
--------------------------------------------------
npm install vue-router@4

引入成功后需要在main.js 中

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
--------------------------------------------------
import myRouter from './router'

Vue.use(ElementUI);
new Vue({
  router:myRouter,
  render: h => h(App),
}).$mount('#app')

elementui这样配置后即可直接使用，

路由还需要配置下

创建router文件夹加入index.js

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);
export const constantRoutes = [
  {
    path: '/',
    component: () => import("@/components/main"),
  },
  {
    path: '/textLinks',
    component: () => import("@/components/textLinks"),
  },
  {
    path: '/index',
    component: () => import("@/components/index"),
  },
  {
    path: '/Detail/:selectType/:name',
    component: () => import("@/components/Detail"),
  }
]

// 防止连续点击多次路由报错
let routerPush = Router.prototype.push;
Router.prototype.push = function push(location) {
  return routerPush.call(this, location).catch((err) => err);
};

export default new Router({
  mode: "history", // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
});

配置好需要跳转的页面路径

这样路由就可以使用了，在需要的文件中用编程式路由导航即

$router.push('/home')

当然也可以用声明式路由导航即

<router-link to="/home">home</router-link>

然后就要用到前后数据交互的内容了，引入axios 引入成功后在package.json中会加入 "axios": "0.24.0", 也可以手动添加依赖，提示引入信息后点击引入。


npm install axios vue-axios


"dependencies": {
    "core-js": "^3.8.3",
    "axios": "0.24.0",
    "element-ui": "^2.15.13",
    "vue": "^2.6.14",
    "vue-router": "^3.5.2"
  },

在vue.config.js文件中

const { defineConfig } = require("@vue/cli-service");

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}

const name = process.env.VUE_APP_TITLE; // 网页标题

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, //关闭语法检查
  devServer: {
    host: "0.0.0.0",
    port: 80,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`,
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: "",
        },
      },
      '/pdf': {
        target: `http://localhost:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^']: ''
        }
      }
    }
  },
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
});

添加Api文件夹加入request.js文件

import axios from "axios";
import { Message } from "element-ui";
import { tansParams } from "@/api/ruijie";

axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 150000,
});

// request拦截器
service.interceptors.request.use(
  (config) => {
    // get请求映射params参数
    if (config.method === "get" && config.params) {
      let url = config.url + "?" + tansParams(config.params);
      url = url.slice(0, -1);
      config.params = {};
      config.url = url;
    }
    return config;
  },
  (error) => {
    console.log(error);
    Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (res) => {
    return res.data;
  },
  (error) => {
    let { message } = error;
    if (message == "Network Error") {
      message = "后端接口连接异常";
    } else if (message.includes("timeout")) {
      message = "系统接口请求超时";
    } else if (message.includes("Request failed with status code")) {
      message = "系统接口" + message.substr(message.length - 3) + "异常";
    }
    Message({
      message: message,
      type: "error",
      duration: 5 * 1000,
    });
    return Promise.reject(error);
  }
);

export default service;

还需要写一个接口js来接后台的数据

import request from "@/api/request";

export function getPdf(query) {
    return request({
      url: "/look/getLookList?name=" +query.name+"&type="+query.selectType,
      method: "get",
    });
}

export function getViewPdf(query) { 
  return request({
    url: "/look/viewPdf",
    method: "post",
    params: query,
  });
}

这样然后就可以在.vue文件中写方法来获取接口了。

例如：

  getList() {
      getPdf(this.queryParams).then((response) => {
        this.tableData = response.data;
      });
    },

然后要将数据绑定在template模板上语法是：

:data="tableDate"

 <div class="tableStyle">
        <el-table :data="tableData" class="itemColor">
          <el-table-column prop="name" label="名称">
            <template slot-scope="scope">
              <span
                style="cursor: pointer; color: #4183c4"
                @click="viewPdf(scope.row)"
                >{{ scope.row.name }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="code" label="编码">
            <template slot-scope="scope">
              <span
                @click="viewPdf(scope.row)"
                style="cursor: pointer; color: #4183c4"
                >{{ scope.row.code }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="author" label="作者"></el-table-column>
          <el-table-column prop="type" label="类型" width="140">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 2">动物</span>
              <span v-if="scope.row.type == 3">植物</span>
              <span v-if="scope.row.type == 4">人</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

最后通过终端运行启动项目打开网页

npm run dev

此时基本一个vue 的项目环境就搭建好了。

vue环境搭建以及引入组件配置环境

ｖｕｅ 前端环境搭建

ｖｕｅ　前端环境搭建