vue2搭建项目

1、在键盘上win+r，输入cmd，打开终端窗口,进入到要创建项目的路径，输入以下命令

2、如果碰到下面这个问题，就说明现在使用的是旧版本，要卸载当前的，重新下载新的

卸载和安装命令：

  npm uninstall -g vue-cli
  npm install -g @vue/cli

3、成功之后就可以创建项目了，输入命令：

4、使用vscode打开项目，以下是项目目录

 

5、App.vue配置代码

<template>
  <div id="app">
    <!-- 用于显示与当前路由匹配的组件的占位符，通过它实现了单页面应用的动态页面切换功能。 -->
    <router-view></router-view>
  </div>
</template>

<script>

</script>

<style>

</style>

 

6、main.js配置代码，其中引入的插件需要先下载才能引入

import Vue from 'vue';
import Vuex from 'vuex';
import ElementUI from 'element-ui';
import VueRouter from 'vue-router'
import router from './plugins/router'
import store  from './store'
import App from './App.vue'
import './style.scss'
import axios from 'axios';
axios.defaults.withCredentials=true
Vue.config.productionTip = false;
Vue.use(ElementUI)
Vue.use(VueRouter)
Vue.use(Vuex);
new Vue({
  router,
  store,
  render: (h) => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this
  }
}).$mount('#app')

 

 7、import './style.scss'是导入全局样式，以下是一些相关代码

 以下是一些基础的文件配置

8、vue.config.js配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,
    devServer: {
      host: "0.0.0.0", //可以忽略不写
      port: 8080, //它是用来修改你打开后的端口号的
      open: true, //值为 true的话，项目启动时自动打开到浏览器里边， false不会打开
      // lintOnSave: false,
      overlay: {
        warnings: false, //不显示警告
        errors: false, //不显示错误
      },
      proxy: {
        "/api": {
          target: process.env.VUE_APP_BASE_URL, //跨域请求的公共地址
          ws: false, //也可以忽略不写，不写不会影响跨域
          changeOrigin: true, //是否开启跨域，值为 true 就是开启， false 不开启
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },

  
})

9、store配置

store目录文件

common.js配置代码

const state = {

};

const mutations = {
  
};

const actions = {
};

const getters = {};

export default {
  state,
  mutations,
  actions,
  getters,
};

index.js配置代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import user from './user'
import common from './common'
export default new Vuex.Store({
  modules:{
    user,
    common
  }
})

user.js配置代码

import {getToken,setToken,removeToken,} from "../utils/auth/index"
const state = {
  rememberPaeeword:'',
  token:getToken(),
 

};
const mutations = {
  setToken(state, token) {
    state.token=token;
   
    setToken(token);
  },
  removeToken(state){
    state.token=null;
    removeToken()
  },
};
const actions = {

};

const getters  = {

};

export default {
  state,
  mutations,
  actions,
  getters,
};

其中，还有另一个auth文件的代码，文件目录如下

auth文件夹的index.js代码配置

const TokenKey = "jwt"

// 获取token
export function getToken() {
    return localStorage.getItem(TokenKey)
}

// 设置token
export function setToken(token) {
    return localStorage.setItem(TokenKey, token)
}

// 清除token
export function removeToken() {
    return localStorage.removeItem(TokenKey)
}

10、接口配置

接口文件

在index.js文件中设置请求头代码

import axios from "axios";
import nProgress from 'nprogress';
import 'nprogress/nprogress.css'
import { getToken } from "../auth/auth";
const request = axios.create({
    baseURL: '你的服务器地址'
})
//设置请求头
request.interceptors.request.use((config) => {
    nProgress.start()
    const token = getToken();
    config.headers["Content-Type"] = "application/json;charset=utf-8";
    if (token) {
      config.headers["jwt"] = token;
    }
    return config;
}, e => Promise.reject(e))
request.interceptors.response.use((res) => {
    nProgress.done()
    return res.data
}, e => Promise.reject(e))
export default request

 login.js的代码，用来请求登录接口

11、路由配置

路由配置目录文件 

 

index.js配置代码

import Vue from "vue";
import VueRouter from "vue-router";
// import { getToken } from "@/utils/auth/index";
// import store from "../store/index";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: "/login",
  },
  {
    path: "/login",
    name: "login",
    component: () => import("@/pages/Login/loginPage.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  routes,
});
// 以下代码用来实现免登录的功能
// router.beforeEach((to, from, next) => {
//   const token = getToken();
//   if (to.path != "/login" && !token && !store.state.userInfo) {
//     Toast("请先登录", "error");
//     return next({ path: "/login" });
//   }
//   if (to.path == "/login" && token) {
//     Toast("请先退出登录", "warning");
//     return next({ path: from.path ? from.path : "/" });
//   }

//   next();
// });


export default router;

 vue2项目的基本搭建就这样啦~