用vite+vue3.0+ts+element-plus搭建项目的教程

这篇文章主要介绍“用vite+vue3.0+ts+element-plus搭建项目的教程”，在日常操作中，相信很多人在用vite+vue3.0+ts+element-plus搭建项目的教程问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”用vite+vue3.0+ts+element-plus搭建项目的教程”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

vite 出了 2.x 版本，抱着学一学的心态决定出个简单的项目，结合 element-plus，以及将会成为每位前端必会的 typescript，实现了如下内容。

vite是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。

vite 作用

• 快速的冷启动：不需要等待打包操作；

• 即时的热模块更新：替换性能和模块数量的解耦让更新飞起；

• 真正的按需编译：不再等待整个应用编译完成，这是一个巨大的改变。

使用的环境

• node v12.19.0

• @vue/cli 4.5.8

搭建项目

npm init vite-app <project-name> cd <project-name> npm install npm run dev

或

yarn create vite-app <project-name> cd <project-name> yarn yarn 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,//是否开启https   ssr: 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'， 'ES2015'， 'ES2016'， 'ES2017'， 'ES2018'， 'ES2019'， 'ES2020'，或'ESNEXT'。     "module": "commonjs",//指定模块代码生成:'none'， 'commonjs'， 'amd'， 'system'， 'umd'， 'es2015'， 'es2020'，或'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>   <h2>{{ msg }}</h2>   <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 文件时出现以下报错，但是不影响代码正常运行

报错原因：typescript 只能理解 .ts 文件，无法理解 .vue文件

解决方法：在项目根目录或 src 文件夹下创建一个后缀为 .d.ts 的文件，并写入以下内容：

declare module '*.vue' { } declare module '*.js' declare module '*.json'; declare module '*.svg' declare module '*.png' declare module '*.jpg' declare module '*.jpeg' declare module '*.gif' declare module '*.bmp' declare module '*.tiff'

至此项目搭建完成，可以愉快的写代码了。

到此，关于“用vite+vue3.0+ts+element-plus搭建项目的教程”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！