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中使用mockjs代码实例
Nov 25 Vue.js
对vue生命周期的深入理解
Dec 03 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue postcss-px2rem 自适应布局
May 15 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分页详细讲解(有实例)
2013/10/30 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
实例讲解python中的协程
2018/10/08 Python
python爬取淘宝商品销量信息
2018/11/16 Python
Python的UTC时间转换讲解
2019/02/26 Python
10款最好的Python开发编辑器
2019/07/03 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
怎么快速自学python
2020/06/22 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
幼儿教师自我鉴定
2013/11/02 职场文书
英语演讲稿范文
2014/01/03 职场文书
运动会广播稿200米
2014/01/27 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
医生见习报告范文
2014/11/03 职场文书
升学宴答谢词
2015/01/05 职场文书
建国大业电影观后感
2015/06/01 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers