这篇文章主要介绍“怎么使用vite+vue3.0+ts+element-plus搭建项目”,在日常操作中,相信很多人在怎么使用vite+vue3.0+ts+element-plus搭建项目问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么使用vite+vue3.0+ts+element-plus搭建项目”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
vite是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包。
快速的冷启动:不需要等待打包操作;
即时的热模块更新:替换性能和模块数量的解耦让更新飞起;
真正的按需编译:不再等待整个应用编译完成,这是一个巨大的改变。
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 相当于 @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;
{ "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
<template> <img alt="Vue logo" src="./assets/logo.png" /> <router-view /> </template> <script> export default { name: 'App', setup() { } } </script>
在 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>
在 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.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搭建项目”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。