环境:
node版本v10以上
vue-cli4.5以上
vue3常用ui库
element-plus官网
ant-design-vue 2.x
vant 3.x
vue3项目搭建基本流程配置
使用 vite 创建vue3
cnpm create vite-app demo //使用vite 安装vue3
cd demo //切换到项目根目录
cnpm i //安装相关依赖
npm run dev //运行项目
访问网址即可看到
vite.config.js 配置文件
之前vue2中使用的是vue.config.js,使用vite搭建的项目就需要在根目录下配置vite.config.js,相比vue2的配置要简明的多。
const path = require("path");
// vite.config.js # or vite.config.ts
console.log(path.resolve(__dirname, "./src"));
module.exports = {
alias: {
// 键必须以斜线开始和结束
"/@/": path.resolve(__dirname, "./src"),
},
/**
* 在生产中服务时的基本公共路径。
* @default '/'
*/
base: "./",
/**
* 与“根”相关的目录,构建输出将放在其中。如果目录存在,它将在构建之前被删除。
* @default 'dist'
*/
outDir: "dist",
port: 3000,
// 是否自动在浏览器打开
open: false,
// 是否开启 https
https: false,
// 服务端渲染
ssr: false,
// 引入第三方的配置
// optimizeDeps: {
// include: ["moment", "echarts", "axios", "mockjs"],
// },
proxy: {
// 如果是 /api 打头,则访问地址如下
"/api": {
target: "https://baidu.com/",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
};
vueRouter
安装vue-router@next,最新版路由
cnpm install vue-router@next --save
在src目录下创建route路由目录,添加index.js
import {createRouter, createWebHashHistory} from 'vue-router';
// 1. 定义路由组件, 注意,这里一定要使用 文件的全名(包含文件后缀名)
import login from "../vuew/login.vue";
const routes = [
{
path: "/",
redirect: '/login'
},
{ path: "/login", component: login },
]
// Vue-router新版本中,需要使用createRouter来创建路由
export default createRouter({
// 指定路由的模式,此处使用的是hash模式
history: createWebHashHistory(),
routes // short for `routes: routes`
})
在main.js中引入router
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './route/index'
const app = createApp(App)
app.use(router)
app.mount('#app')
// createApp(App).mount('#app')
Vuex
cnpm install vuex@next
安装完后配置vuex
在项目src目录下面新建store目录,并添加index.js文件,添加以下内容
import { createStore } from 'vuex'
export default createStore({
state() {
return {
count: 0,
};
},
mutations: {
increment(state) {
state.count++;
},
},
actions: {
increment(context) {
context.commit("increment");
},
},
});
axios
安装axios 和 qs
cnpm install axios -S
cnpm install qs -S
在项目中创建axios.js(尾汁根据自己喜好而定)
axios.js
import axios from "axios";
import qs from "qs";
import {ElMessageBox} from 'element-plus';
// axios.defaults.baseURL = '' //正式
// axios.defaults.baseURL = 'http://test' //测试
//post请求头
axios.defaults.headers.post["Content-Type"] ="application/x-www-form-urlencoded;charset=UTF-8";
//设置超时
axios.defaults.timeout = 10000;
axios.interceptors.request.use(
config => {
return config;
},
error => {
return Promise.reject(error);
}
);
axios.interceptors.response.use(
response => {
if (response.status == 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
error => {
ElMessageBox(JSON.stringify(error), '请求异常', {
confirmButtonText: '确定',
callback: action => {}
});
}
);
export default {
post(url, data) {
return new Promise((resolve, reject) => {
axios({
method: 'post',
url,
data: qs.stringify(data),
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err)
});
})
},
get(url, data) {
return new Promise((resolve, reject) => {
axios({
method: 'get',
url,
params: data,
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err)
})
})
}
};
main.js中全局引用axios
import axios from './static/js/axios';
const app = createApp(App);
//全局配置
app.config.globalProperties.$http=axios;
可以在组件用通过 getCurrentInstance() 来获取全局 globalProperties 中配置的信息,getCurrentInstance 方法获取当前组件的实例,然后通过 ctx 属性获得当前上下文,这样我们就能在 setup 中使用 axios来请求数据
如何调用,举个栗子
<script>
import {
computed,
defineComponent,
getCurrentInstance,
onMounted,
reactive,
ref,
toRefs,
} from "vue";
import { ElMessage } from "element-plus";
export default defineComponent({
name: "demo",
props: "",
components: "",
setup(props, context) {
//引用全局变量
const { ctx } = getCurrentInstance();
let state = reactive({
buttonName: "点击发送请求",
});
//dom挂载后
onMounted(() => {
sendHttp();
});
function sendHttp() {
ctx.$http
.post("/test", {
id: 1,
name: "test",
})
.then((res) => {
ElMessage.success({
message: "恭喜你,这是一条成功消息",
type: "success",
});
})
}
return {
...toRefs(state),
sendHttp,
};
},
});
</script>
eslint-plugin-vue 文件检查
cnpm install -D eslint eslint-plugin-vue
根目录下创建 .eslintrc.js
module.exports = {
extends: [
"plugin:vue/vue3-recommended",
"prettier",
"prettier/vue",
],
rules: {
'vue/no-unused-vars': 'error',
"vue/no-multiple-template-root": "off",
},
};
TypeScript
安装typeScript
cnpm install typescript -D
初始化配置文件tsconfig.json,就可以直接使用.ts文件开发了
npx tsc --init
配置 ts 识别vue文件,在项目根目录添加shim.d.ts文件
declare module "*.vue" {
import { Component } from "vue";
const component: Component;
export default component;
}
element-plus安装配置
cnpm install element-plus --save
在main.js中引入,即可正常使用了
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
基本上就可以满足日常开发需要了,年轻人要注意保护头发~