vite+vue3+ts+element-plus项目搭建–超详细
快速的冷启动:不需要等待打包操作;即时的热模块更新:替换性能和模块数量的解耦让更新飞起;真正的按需编译:不再等待整个应用编译完成,这是一个巨大的改变。vite 作用
node v12.19.0@vue/cli 4.5.8使用的环境
搭建项目
npm init vite-app <project-name>cd <project-name>npm installnpm run dev或yarn create vite-app <project-name>cd <project-name>yarnyarn dev
安装typescript、router、axios、element-plus插件
npm install vue-router@next axios --savenpm install typescript element-plus --save-dev或yarn add vue-router@next axiosyarn add typescript element-plus --dev
配置
vite.config.ts
vite.config.ts 相当于 @vue-cli 项目中的 vue.config.js
import path from "path";const pathResolve = (pathStr: string) => {return path.resolve(__dirname, pathStr);}const config = {base: './',//在生产中服务时的基本公共路径。@default '/'alias: {'/@/': pathResolve('./src'),},outDir: 'vite-init',//构建输出将放在其中。会在构建之前删除旧目录。@default 'dist'minify: 'esbuild',//构建时的压缩方式hostname: 'localhost',//本地启动的服务地址port: '8800',//服务端口号open: false,//启动服务时是否在浏览器打开https: false,//是否开启httpsssr: false,//是否服务端渲染optimizeDeps: {// 引入第三方的配置include: ['axios']},// proxy: {//代理配置// '/api': {//target: 'http://xx.xx.xx.xx:xxxx',//changeOrigin: true,//ws: true,//rewrite: (path: string) => { path.replace(/^\/api/, '') }// }// }}module.exports = config;
tsconfig.json
{"compilerOptions": {"target": "ES5",//指定ECMAScript的目标版本:'ES3'(默认),'ES5', 'ES', 'ES', 'ES', 'ES', 'ES', 'ES',或'ESNEXT'。"module": "commonjs",//指定模块代码生成:'none', 'commonjs', 'amd', 'system', 'umd', 'es', 'es',或'ESNext'。"strict": true,//是否启用所有严格的类型检查选项。"baseUrl":"./",//用于解析非绝对模块名称的基本目录。"paths": {"/@/*": ["./src/*"]}, "noImplicitAny": true, //对于隐含有'any'类型的表达式和声明引发错误。"esModuleInterop": true, //通过为所有导入创建名称空间对象,实现CommonJS和ES模块之间的互操作性。意味着“allowSyntheticDefaultImports”。"experimentalDecorators": true, //支持对ES7装饰器的实验性支持。"skipLibCheck": true, //跳过声明文件的类型检查。"forceConsistentCasingInFileNames": true //禁止对同一文件使用大小写不一致的引用。}}
App.vue
修改app.vue
<template><img alt="Vue logo" src="./assets/logo.png" /><router-view /></template><script>export default {name: 'App',setup() {}}</script>
Views
在 src 下新建 views文件夹,并在文件夹内创建 index.vue
<template><HelloWorld :msg="msg"></HelloWorld></template><script lang="ts">import HelloWorld from "/@/views/HelloWorld.vue";import {defineComponent } from "vue";export default defineComponent({name: "Home",components: {HelloWorld },setup() {return {msg: "hello World",};},});</script>
PS:在引入.vue文件时一定要带上后缀名,否则会报找不到文件
在views文件夹内创建 HelloWorld.vue
<template><h1>{{msg }}</h1><button @click="realTime.count++">count is: {{realTime.count }}</button><button @click="handleclick">点击跳转其它路由</button><p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p></template><script>import {defineComponent, reactive } from "vue";import {useRouter } from 'vue-router'export default defineComponent({name: 'Index',props: {msg: {type: String, default: '欢迎来到vue3' } },setup(props) {const router = useRouter();let realTime = reactive({count: 0 });function handleclick() {router.push({path: '/other' })}return {msg: props.msg,realTime,handleclick}}})</script>
router
在 src 下新建 router 文件夹,并在文件夹内创建 index.ts
import {createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'const routes: Array<RouteRecordRaw> = [{path: '/',component: () => import("/@/views/index.vue")},]export default createRouter({history: createWebHistory(),routes})
main.ts
把原本的main.js改为main.ts,修改后别忘记把index.html里面也改为main.ts
import {createApp } from 'vue'import router from './router/index'import App from './App.vue'import ElementPlus from 'element-plus'import 'element-plus/lib/theme-chalk/index.css'import './reset.css'const app = createApp(App);app.use(ElementPlus);app.use(router);app.mount('#app');
在 ts 文件中引入 .vue 文件时出现以下报错,但是不影响代码正常运行 // 处理方法请看上一篇文章