vite+vue3+ts+element-plus项目搭建--超详细
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 install
npm run dev或yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev
安装typescript、router、axios、element-plus插件
npm install vue-router@next axios --save
npm install typescript element-plus --save-dev或yarn add vue-router@next axios
yarn 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', '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><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 文件时出现以下报错,但是不影响代码正常运行 // 处理方法请看上一篇文章
最后是我搭建各个版本的版本号 , 因为在搭建过程中会出现版本不一报错的问题
vite+vue3+ts+element-plus项目搭建--超详细相关推荐
- vite+vue3+ts项目搭建之集成qiankun让其成为子应用模板(vite+vue3+ts+qiankun项目)—新增主应用在线地址可以进入vue2/vue3子应用
前言 以下操作,是续接之前 第四步 --即:vite+vue3+ts+pinia+element-plus项目已完成搭建好,可以直接业务开发了 主应用技术栈:vue2+webpack+js 集成qia ...
- vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(2)
回顾 上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客 上篇文章搭建了vue3项目,引入了ant ...
- vite + vue3 + ts集成Cesium
vite + vue3 + ts集成Cesium 安装cesium:npm i cesium vite-plugin-cesium vite -D 在vite.config.ts中进行相应的cesiu ...
- vue3+ts+element封装一个简易的curd
vue3+ts+element封装一个简易的curd 闲来无趣做一个简单的table封装,不喜勿喷 首先创建一个公共的Table.vue/pagination.vue文件 Table.vue < ...
- centos7根据端口查进程_记录一次CentOs7下Nginx+WSGI部署Django项目(超详细)
记录一次Django部署的文章,不是很熟悉Linux系统,踩了不少坑,本篇文章相当于是一个总结,我会在本文中详细介绍,部署单个Django项目和多个Django的方法,如读者有更好的方法,欢迎留言一起 ...
- 瞬间心情愉悦,头发都少掉了几根!---Django+uwsgi+Nginx项目部署超详细步骤
文章目录 瞬间心情愉悦,头发都少掉了几根!---Django+uwsgi+Nginx项目部署超详细步骤 先决条件 步骤 本地运行测试 上传服务器 环境安装 准备django程序 完美解决! 瞬间心情愉 ...
- vite+vue3+ts框架搭建问题记录
404 按官网提示执行npm init vite@latest报错 node版本太低,更新node版本即可,window不能使用命令行更新,重新下载node安装包. 下载地址用下载 | Node.js ...
- vite+vue3+ts项目插件使用(提高开发效率vite+vue3插件使用)新增在线预览地址
在线预览 Link:https://wocwin.github.io/wocwin-admin/ 一.@vitejs/plugin-vue-jsx vite+vue3项目全面支持jsx语法 npm i ...
- 【Vue3】创建 vite + vue3 + Ant Design Vue 项目
搭建脚手架 创建项目: 然后按照它的指示运行项目 配置文件 安装构建 vue-router: npm i vue-router@next 创建 router/index.js 文件: import { ...
最新文章
- iOS使用Security.framework进行RSA 加密解密签名和验证签名
- linux项目课程设计,LINUX课程设计项目需求解析.doc
- 分割 标注数据_7种常用的数据标注工具
- java 继承 模型_java – 画布形状模型的继承与组合?
- 【绝迹篇】C#RSA算法实现
- Jenkins + Gitlab + Ansible--playbook 代码上线流程
- ndnsim r语言 ubuntu_Ubuntu14.04安装配置ndnSIM
- springboot使用mybatis_使用springboot+mybatis数据库存储服务化
- 面试时会经常遇到的经典算法
- 三维计算机视觉(二)--点云滤波
- WPF中使用ItemsControl嵌套绑定,在ItemsControl中嵌套一个ItemsControl,然后使用绑定(2)...
- vba移动文件_你想要的爬虫、VBA系列教程这里都有!
- SSH key的生成及使用
- 标准误计算机excel公式,如何用excel或wps计算标准差、方差、标准误差?
- C语言 汉字码表 STM32 拼音输入法
- 你是如何看待saas行业
- pvs-stdio ue4_PlatformIO中的PVS-Studio集成
- 文件是存储在计算机外存上的,计算机存储器——内存和外存.doc
- dynamic_cast用法总结
- Scrapy 2.6 Downloader Middleware 下载器中间件使用指南