您现在的位置是:首页 >其他 >vue2、3 开发项目前的准备(分享)网站首页其他
vue2、3 开发项目前的准备(分享)
简介vue2、3 开发项目前的准备(分享)
文章目录
1. Vue2
因为最近都是做的 pc 端的项目,所以就按 pc 端常用的来配,都是架子可以直接拷贝
1.1 安装依赖
vue create 项目名称
// 安装好了以后安装其他依赖
npm i element-ui axios vue-router@3 vuex@3
1.2 配置 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
// utils/reuqest.js 中
import axios from 'axios';
import { Loading } 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) => {
ElMessage.error('请求错误:' + error.message);
return Promise.reject(error);
},
);
// 添加响应拦截器
instance.interceptors.response.use(
({ data }) => {
loadingInstance.close();
return data;
},
(error) => {
loadingInstance.close();
return Promise.reject(error.response);
},
);
1.4 配置 vue-router
// 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
// 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
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 需要改一下
2.4 配置 vue-router
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
// 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");
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。