文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么使用vite+vue3.0+ts+element-plus搭建项目

2023-07-04 14:43

关注

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

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

vite 作用

使用的环境

搭建项目

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


yarn create vite-app <project-name>cd <project-name>yarnyarn 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搭建项目”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯