vite+vue3.0+ts+element-plus快速搭建项目的实现


Posted in Vue.js onJune 24, 2021

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>
  <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.0+ts+element-plus快速搭建项目的实现

报错原因: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快速搭建项目的实现的文章就介绍到这了,更多相关vite+vue3.0+ts+element-plus搭建内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
vuex的使用步骤
Jan 06 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue-router中hash模式与history模式的区别
Vue-Element-Admin集成自己的接口实现登录跳转
Vue + iView实现Excel上传功能的完整代码
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
vue3使用vue-router的完整步骤记录
一篇文章学会Vue中间件管道
Jun 20 #Vue.js
Vue过滤器(filter)实现及应用场景详解
You might like
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
javascript读取xml
2006/11/04 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
分析在Python中何种情况下需要使用断言
2015/04/01 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
浅析Python 条件控制语句
2020/07/15 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
水务局局长岗位职责
2013/11/28 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
市场调查策划方案
2014/06/10 职场文书
怎么写工作检讨书
2014/11/16 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL