服务器之家

服务器之家 > 正文

使用Vite2+TypeScript4+Vue3技术栈,如何入手开发项目

时间:2021-03-23 02:00     来源/作者:前端历劫之路

使用Vite2+TypeScript4+Vue3技术栈,如何入手开发项目

前言

已经两周没有发文了,自己临时有点事耽误了,在这里向大家表示深深地歉意。今天,我们使用vite2.0+vue3+ts来开发一个demo项目。

实战

我们,打开Vite官方网站(https://cn.vitejs.dev/)。

  • Vite (法语意为 "快速的",发音 /vit/) 是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:
  • 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。
  • 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可以输出用于生产环境的优化过的静态资源。
  • Vite 意在提供开箱即用的配置,同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性,并有完整的类型支持。

这里,我们将Vite与VueCLI做一下对比。

  • Vite在开发模式下不需要打包可以直接运行,使用的是ES6的模块化加载规则;
  • VueCLI开发模式下必须对项目打包才可以运行;
  • Vite基于缓存的热更新;
  • VueCLI基于webpack的热更新;

搭建项目

我们来搭建第一个 Vite 项目,我这里使用Yarn依赖管理工具进行创建项目。

  1. yarn create @vitejs/app 

在命令行键入以上命令,然后你可能会等待一会儿~

依次配置Project name、Select a template

  1. Project name: vite-vue-demo 
  2.  
  3. Select a template: vue-ts 

因为,我们这里要是用Vue+Ts开发项目所以我们选择vue-ts这个模板。一顿操作之后,会提示你键入以下命令,依次填入即可。

  1. cd vite-vue-demo 
  2. yarn 
  3. yarn dev 

这样我们搭建项目就完成了。

项目文件夹一览

我们会看到以下文件及其文件夹。

  1. node_modules  ---依赖文件夹 
  2. public  ---公共文件夹 
  3. src  ---项目主要文件夹 
  4. .gitignore  ---排除git提交配置文件 
  5. index.html  ---入口文件 
  6. package.json  ---模块描述文件 
  7. tsconfig.json  ---ts配置文件 
  8. vite.config.ts  ---vite配置文件 

开发前配置

在开发之前呢,我们需要做以下工作。

1. 编辑ts配置文件

根据需要,配置需要的配置项。compilerOptions里面配置的是编译时的配置项,include项是配置生效包括在内的路径,而exclude则恰恰相反,排除在外的路径。

  1.   "compilerOptions": { 
  2.     "target""esnext"
  3.     "module""esnext"
  4.     "strict"true
  5.     "jsx""preserve"
  6.     "importHelpers"true
  7.     "moduleResolution""node"
  8.     "experimentalDecorators"true
  9.     "skipLibCheck"true
  10.     "esModuleInterop"true
  11.     "allowSyntheticDefaultImports"true
  12.     "sourceMap"true
  13.     "baseUrl""."
  14.     "types": ["vite/client"], 
  15.     "paths": { 
  16.       "@/*": [ 
  17.         "src/*" 
  18.       ] 
  19.     }, 
  20.     "lib": [ 
  21.       "esnext"
  22.       "dom"
  23.       "dom.iterable"
  24.       "scripthost" 
  25.     ] 
  26.   }, 
  27.   "include": [ 
  28.     "src/**/*.ts"
  29.     "src/**/*.tsx"
  30.     "src/**/*.vue"
  31.     "tests/**/*.ts"
  32.     "tests/**/*.tsx" 
  33.   ], 
  34.   "exclude": [ 
  35.     "node_modules" 
  36.   ] 

2. 配置vite配置文件

为什么需要配置这个文件呢?是因为我们开发这个demo项目,需要局部引入Element Plus UI框架,另外,让我们简单了解下怎么配置Vite。在之前我们使用VueCLI3.x创建项目时配置项目是在根目录下vue.config.js文件下进行配置。这个文件应该导出一个包含了选项的对象。

  1. module.exports = { 
  2.   // 选项... 

而vite.config.ts也与其相似。

  1. export default { 
  2.   // 配置选项 

因为 Vite 本身附带 Typescript 类型,所以可以通过 IDE 和 jsdoc 的配合来进行智能提示,另外你可以使用 defineConfig 帮手函数,这样不用 jsdoc 注解也可以获取类型提示。这里呢,我们这样配置vite.config.ts。

  1. import { defineConfig } from 'vite' 
  2. import vue from '@vitejs/plugin-vue' 
  3.  
  4. // https://vitejs.dev/config/ 
  5. export default defineConfig({ 
  6.   plugins: [vue()] 
  7. }) 

你会发现,Vue在这里被当做vite的一个内置插件引入进来。刚才,我们说要局部引入Element Plus UI框架,我们打开Element Plus UI局部引入网址:(https://element-plus.gitee.io/#/zh-CN/component/quickstart),发现这里需要配置babel.config.js,而我们使用的是TS,所以我们下意识的更改下后缀名觉得就可以成功了,不过,我反正被坑了。于是,采取了这种办法:在vite.config.ts文件中这样配置:

  1. import { defineConfig } from 'vite' 
  2. import vue from '@vitejs/plugin-vue' 
  3. import vitePluginImp from "vite-plugin-imp"
  4.  
  5. // https://vitejs.dev/config/ 
  6. export default defineConfig({ 
  7.   plugins: [vue(), 
  8.     vitePluginImp({ 
  9.     libList: [ 
  10.       { 
  11.         libName: 'element-plus'
  12.         style: (name) => { 
  13.           return`element-plus/lib/theme-chalk/${name}.css` 
  14.         } 
  15.       } 
  16.     ] 
  17.   })], 
  18.   server: { 
  19.     port: 6061 
  20.   }, 
  21. }) 

vite-plugin-imp一个自动导入组件库样式的vite插件。

主要项目文件夹Src一览

以下是最初始的项目文件目录。

  1. assets  ---静态文件夹 
  2. components  ---组件文件夹 
  3. App.vue  ---页面文件 
  4. main.ts  ---项目入口文件 
  5. shims-vue.d.ts  ---类型定义文件(描述文件) 

这么多文件,我们不一一展示了,主要看下App.vue、main.ts、shims-vue.d.ts。

App.vue

  1. <template> 
  2.   <img alt="Vue logo" src="./assets/logo.png" /> 
  3.   <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /> 
  4. </template> 
  5.  
  6. <script lang="ts"
  7. import { defineComponent } from 'vue' 
  8. import HelloWorld from './components/HelloWorld.vue' 
  9.  
  10. export default defineComponent({ 
  11.   name'App'
  12.   components: { 
  13.     HelloWorld 
  14.   } 
  15. }) 
  16. </script> 
  17.  
  18. <style> 
  19. #app { 
  20.   font-family: Avenir, Helvetica, Arial, sans-serif; 
  21.   -webkit-font-smoothing: antialiased; 
  22.   -moz-osx-font-smoothing: grayscale; 
  23.   text-align: center; 
  24.   color: #2c3e50; 
  25.   margin-top: 60px; 
  26. </style> 

main.ts

  1. import { createApp } from 'vue' 
  2. import App from './App.vue' 
  3.  
  4. createApp(App).mount('#app'

shims-vue.d.ts

  1. declare module '*.vue' { 
  2.   import { DefineComponent } from 'vue' 
  3.   const component: DefineComponent<{}, {}, any
  4.   export default component 

这里,我们看到defineComponent这个Vue3的一个方法。为什么这里会使用它呢?引用官方的一句话:

  • 从实现上看,defineComponent 只返回传递给它的对象。但是,就类型而言,返回的值有一个合成类型的构造函数,用于手动渲染函数、TSX 和 IDE 工具支持。

引入vue-router4

看完之前的基础配置,我们现在准备开始引入Vue3的生态系统。

现在我们安装 vue-router 版本的时候,默认还是安装的 3.x 版本的,由于 vue3 的更新发生很大的变化,所以为了兼容处理,vue-router 也将发布最新版 4.x 版本了。

这是router4的官方网址:

  1. https://next.router.vuejs.org/ 

1. 安装

  1. npm install vue-router@4 

2. 配置文件

安装完依赖后,在项目文件夹src下创建一个router文件夹,里面创建一个index.ts文件(因为这里我们基于TS的项目)。

  1. import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
  2. import Home from "../views/Home.vue"
  3.  
  4. const routes: Array<RouteRecordRaw> = [ 
  5.     { 
  6.         path: "/"
  7.         name"Home"
  8.         component: Home 
  9.     }, 
  10.     { 
  11.         path: "/about"
  12.         name"About"
  13.         component: () => 
  14.             import("../views/About.vue"
  15.     } 
  16. ]; 
  17.  
  18. const router = createRouter({ 
  19.     history: createWebHashHistory(), 
  20.     routes 
  21. }); 
  22.  
  23. export default router; 

另外,你需要在main.ts文件中引入它,并且注册一下。

  1. import { createApp } from "vue"
  2. import App from "./App.vue"
  3. import router from "./router"
  4.  
  5. createApp(App).use(router).mount("#app"); 

为了实验一下效果,我们在src文件夹下创建一个views文件夹,里面创建两个页面文件。分别是About.vue和Home.vue。

home.vue

  1. <template> 
  2.   <p class="txt">home</p> 
  3. </template> 
  4.  
  5. <script lang="ts"
  6. import { Options, Vue } from "vue-class-component"
  7.  
  8. @Options({ 
  9.  
  10. }) 
  11. export default class Home extends Vue {} 
  12. </script> 
  13.  
  14. <style scoped> 
  15. .txt{ 
  16.   color: red; 
  17. </style> 

about.vue

  1. <template> 
  2.   <p>about</p> 
  3. </template> 
  4.  
  5. <script> 
  6. export default { 
  7. name"About" 
  8. </script> 

最后,你在App.vue文件中。

  1. <template> 
  2.   <router-link to="/">Home</router-link> | 
  3.   <router-link to="/about">About</router-link> 
  4.   <router-view /> 
  5. </template> 
  6.  
  7. <script lang="ts"
  8. </script> 

这样,vue-router4就这么成功引入了。

引入css预处理语言

这里呢,我们引入scss。因为我们使用的vite这个构建工具构建的项目,所以我们只需要这样。

  1. npm install -D sass 

我们可以看到官方解释:

  • Vite 同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为他们安装特定的 vite 插件,但相应的预处理器依赖本身必须安装。

所以,你可以这样使用scss。

  1. <template> 
  2.   <p class="txt">home</p> 
  3. </template> 
  4.  
  5. <script lang="ts"
  6. import { Options, Vue } from "vue-class-component"
  7.  
  8. @Options({ 
  9.  
  10. }) 
  11. export default class Home extends Vue {} 
  12. </script> 
  13.  
  14. <style scoped lang="scss"
  15. .txt{ 
  16.   color: red; 
  17. </style> 

使用Element Plus UI

我们在上面已经成功配置局部引入Element Plus框架,那我们可以这样使用它。

  1. <template> 
  2.   <p class="txt">home</p> 
  3.   <ElButton>默认按钮</ElButton> 
  4. </template> 
  5.  
  6. <script lang="ts"
  7. import { Options, Vue } from "vue-class-component"
  8. import { ElButton } from 'element-plus' 
  9.  
  10. @Options({ 
  11.   components: { 
  12.     ElButton 
  13.   } 
  14. }) 
  15. export default class Home extends Vue {} 
  16. </script> 
  17.  
  18. <style scoped lang="scss"
  19. .txt{ 
  20.   color: red; 
  21. </style> 

这里,你会发现引入了 vue-class-component这个组件,它是干什么的呢?

官方网址:

  1. https://class-component.vuejs.org/ 
  • Vue Class Component is a library that lets you make your Vue components in class-style syntax.

译:Vue类组件是一个库,允许您以类样式语法创建Vue组件。

针对vue3版本,我们使用Vue Class Component v8,也就是8版本。

  1. https://www.npmjs.com/package/vue-class-component/v/8.0.0-rc.1 

你可以这样安装它。

  1. npm i vue-class-component@8.0.0-rc.1 

引入vue自定义组件

我们经常自己封装组件,那么在这个项目中我们是怎样引入的呢?我们在src目录下创建一个components文件夹,里面创建一个HelloWorld.vue文件。

HelloWorld.vue

  1. <template> 
  2.   <h1>{{ msg }}</h1> 
  3. </template> 
  4.  
  5. <script lang="ts"
  6. import { ref, defineComponent } from 'vue' 
  7. export default defineComponent({ 
  8.   name'HelloWorld'
  9.   props: { 
  10.     msg: { 
  11.       type: String, 
  12.       required: true 
  13.     } 
  14.   }, 
  15.   setup: () => { 
  16.     const count = ref(0) 
  17.     return { count } 
  18.   } 
  19. }) 
  20. </script> 
  21.  
  22. <style scoped lang="scss"
  23. a { 
  24.   color: #42b983; 
  25.  
  26. label { 
  27.   margin: 0 0.5em; 
  28.   font-weight: bold; 
  29.  
  30. code { 
  31.   background-color: #eee; 
  32.   padding: 2px 4px; 
  33.   border-radius: 4px; 
  34.   color: #304455; 
  35. </style> 

然后,我们在App.vue引入它。

  1. <template> 
  2.   <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /> 
  3.   <router-link to="/">Home</router-link> | 
  4.   <router-link to="/about">About</router-link> 
  5.   <router-view /> 
  6. </template> 
  7.  
  8. <script lang="ts"
  9. import { defineComponent } from 'vue' 
  10. import HelloWorld from './components/HelloWorld.vue' 
  11.  
  12. export default defineComponent({ 
  13.   name'App'
  14.   components: { 
  15.     HelloWorld 
  16.   } 
  17. }) 
  18. </script> 
  19.  
  20. <style > 
  21. #app { 
  22.   font-family: Avenir, Helvetica, Arial, sans-serif; 
  23.   -webkit-font-smoothing: antialiased; 
  24.   -moz-osx-font-smoothing: grayscale; 
  25.   text-align: center; 
  26.   color: #2c3e50; 
  27. </style> 

引入vuex4

vue生态中肯定少不了vuex,为了兼容vue3,vuex也推出了4.0版本。

  1. https://next.vuex.vuejs.org/ 

你可以这样安装它。

  1. npm install vuex@next --save 

你可以在src文件夹创建一个store文件夹,里面创建一个一个index.ts文件。

  1. import { createStore } from "vuex"
  2.  
  3. export default createStore({ 
  4.     state: {}, 
  5.     mutations: {}, 
  6.     actions: {}, 
  7.     modules: {} 
  8. }); 

然后,你在main.ts文件中这样引入使用它。

  1. import { createApp } from "vue"
  2. import App from "./App.vue"
  3. import router from "./router"
  4. import store from "./store"
  5.  
  6. createApp(App).use(router).use(store) 
  7.     .mount("#app"); 

结语

我们这里只是简单地使用vite+ts+vue3搭建了一个小demo,如果你想更深层地使用它,可以关注我的动态。

原文地址:https://mp.weixin.qq.com/s/iB04jzrj6GzAGr_Je9s2fQ

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部