vue2、3 开发项目前的准备，可直接拷贝（分享）-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2、3 开发项目前的准备，可直接拷贝（分享）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. Vue2

因为最近都是做的 pc 端的项目，所以就按 pc 端常用的来配，都是架子可以直接拷贝

1.1 安装依赖

vue create 项目名称

// 安装好了以后安装其他依赖
npm i element-ui axios vue-router@3 vuex@3

1.2 配置 element-ui

element-ui 官网点击这里

// main.js 中
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

1.3 配置 axios

axios 官网点击这里

// utils/reuqest.js 中
import axios from 'axios';
import { Loading, Message } from 'element-ui';

const instance = axios.create({
  baseURL: 'http://xxx:8080',
  timeout: 30000,
  headers: {
    common: {
	  'Authorization': 'Bearer xxx'
	},
    post: {
      'Content-Type': 'application/json-patch+json', // 这个看后端用的什么
    },
  },
});

let loadingInstance = null;
// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    loadingInstance = Loading.service({
      fullscreen: true,
      text: '加载中...',
    });
    return config;
  },
  (error) => {
    Message.error('请求错误：' + error.message);
    return Promise.reject(error);
  },
);

// 添加响应拦截器
instance.interceptors.response.use(
  ({ data }) => {
    loadingInstance.close();
    return data;
  },
  (error) => {
    loadingInstance.close();
    return Promise.reject(error.response);
  },
);

export default instance

1.4 配置 vue-router

vue-router3 的使用点击这里

// router/index.js 中
import Vue from "vue";
import VueRouter from "vue-router";

// 使用插件，使用路由不分前后
Vue.use(VueRouter)

// 导入路由组件
import About from "../components/About"
import Home from "../components/Home"

// 创建路由并导出
export default new VueRouter({
  routes: [
    {
      // 路由对应的路径
      path: "/about",
      // 对应路径展示的组件
      component: About
    },
    {
      path: "/home",
      component: Home
    }
  ]
})

// main.js 中
import Vue from 'vue'
import App from './App.vue'

// 导入路径配置
import router from "./router/index"

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 挂载路由
  router
}).$mount('#app')
// 挂载之后会多两个属性 
// $route：每个组件独享的属性
// $router：全局的一个属性

1.5 配置 vuex

vuex3 的使用点击这里

// store/index.js 中
import Vue from "vue"
import Vuex from "vuex"

// 在实例化前，必须使用该插件
Vue.use(Vuex)

// 导出该对象
export default new Vuex.Store({
  // 状态、数据
  state: { },
  // 获取、计算属性
  getters: { },
  // 逻辑处理
  mutations: { },
  // 异步请求、异步处理
  actions: { }
})

// main.js 中
import Vue from 'vue'
import App from './App.vue'

// 主文件中导入并挂载
import store from "./store/index"

// 取消生成生产提示
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 挂载 vuex
  store,
}).$mount('#app')
// 挂载之后全局会多一个 $store 属性

2. Vue3

2.1 安装依赖

其他安装方式点击这里

vue create 项目名称
// 或者通过 vite 直接安装 vue3 项目
npm init vite-app ProjectName

npm i element-plus axios vue-router@4 pinia

2.2 配置 element-plus

element-plus 官网点击这里

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

2.3 配置 axios

// 这个和 vue2 的配置一样需要注意一下的就是，导入的 element-plus 的 loading 和 message 需要改一下

2.4 配置 vue-router

vue-router4 官网点击这里

import { createRouter, createWebHashHistory } from 'vue-router';

export default createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      // 路由对应的路径
      path: '/about',
      // 对应路径展示的组件，路由懒加载
      component: () => import('组件路径'),
    },
    {
      path: '/home',
      component: () => import('组件路径'),
    },
  ],
});

// main.js 中
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App)
    .use(router)
    .mount('#app');

2.5 配置 pinia

pinia 的使用点击这里文章来源地址https://www.toymoban.com/news/detail-480170.html

// store/index.js 中
import { defineStore } from "pinia"

// defineStore(当前 store 的 Id, {配置项})
export const countStore = defineStore("count", {
  // 状态
  state: () => {
    return {
      count: 1
    }
  },
  // 计算属性
  getters: {
    // 这里的计算属性使用时，为一个属性而不是方法
    increaseNum(store) {
      return store.count * 10
    }
  },
  // 方法
  actions: {
    addCount(value) {
      this.count += value
    }
  }
})

// main.js 中
import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";

const app = createApp(App);
app.use(createPinia());
app.mount("#app");