How to start a project with Vite2+TypeScript4+Vue3 technology stack

preface

Today, we use Vite2.0+Vue3+TS to try it out and develop a demo project.

In actual combat

Let’s open the official Vite website (cn.vitejs.dev/).

Vite (French for “fast”, pronounced /vit/) is a new front-end build tool that dramatically improves the front-end development experience. It consists of two main parts:

A development server based on native ES modules with rich built-in features such as amazingly fast module hot Update (HMR). A set of build instructions that use Rollup to package your code and is preconfigured to output optimized static resources for production. Vite is intended to provide out-of-the-box configuration, while its plug-in API and JavaScript API provide a high degree of extensibility and complete type support.

Here, we compare Vite with VueCLI.

• Vite runs in development mode without packaging, using ES6’s modular loading rules.
• In the VueCLI development model, projects must be packaged to run;
• Vite cache-based hot updates;
• VueCLI webpack-based hot updates;

Set up the project

Let’s set up the first Vite project. I use the Yarn dependency management tool to create the project.

yarn create @vitejs/app
Copy the code

Type the above command on the command line, and then you may wait for a while

Set Project name and Select a template

Project name: vite-vue-demo

Select a template: vue-ts
Copy the code

Since we are using Vue+Ts to develop the project, we chose the vue-TS template. After a meal, you will be prompted to type the following commands. Fill them in one by one.

cd vite-vue-demo
yarn
yarn dev
Copy the code

So we’re done building the project.

Project Folder Overview

We will see the following files and their folders.

Node_modules -- dependency folder public -- public folder SRC -- project main folder.gitignore -- exclude Git commit configuration file index.html -- entry file package.json -- module description file Tsconfig. json --ts configuration file vite.config.ts --vite configuration fileCopy the code

Pre-development configuration

Before development, we need to do the following.

1. Edit the TS configuration file

Configure the required configuration items as required. CompilerOptions specifies what is configured at compile time. Include specifies the path to be included in the configuration and exclude specifies the path to be excluded.

{
  "compilerOptions": {
    "target": "esnext"."module": "esnext"."strict": true."jsx": "preserve"."importHelpers": true."moduleResolution": "node"."experimentalDecorators": true."skipLibCheck": true."esModuleInterop": true."allowSyntheticDefaultImports": true."sourceMap": true."baseUrl": "."."types": ["vite/client"]."paths": {
      "@ / *": [
        "src/*"]},"lib": [
      "esnext"."dom"."dom.iterable"."scripthost"]},"include": [
    "src/**/*.ts"."src/**/*.tsx"."src/**/*.vue"."tests/**/*.ts"."tests/**/*.tsx"]."exclude": [
    "node_modules"]}Copy the code

2. Configure the VITE configuration file

Why do you need to configure this file? Because we are developing this demo project, we need to partially introduce the Element Plus UI framework. In addition, let’s briefly learn how to configure Vite. When we created the project using vuecli3.x, we configured the project in the root directory of the vue.config.js file. The file should export an object that contains the options.

module.exports = {
  / / options...
}
Copy the code

Vte.config. ts is similar.

export default {
  // Configure options
}
Copy the code

Because Vite comes with Typescript types, you can use the IDE and Jsdoc to get smart hints, and you can use the defineConfig helper function to get type hints without jsdoc annotations. Here, we configure vte.config.ts like this.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

Copy the code

You’ll notice that Vue is introduced here as a built-in plugin for Vite. IO /#/ zh-cn /com /#/ element-plus.gitee. IO /#/ zh-cn /com…

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginImp from "vite-plugin-imp";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    vitePluginImp({
    libList: [{libName: 'element-plus'.style: (name) = > {
          return`element-plus/lib/theme-chalk/${name}.css`}}]})],server: {
    port: 6061}})Copy the code

Ite -plugin-imp a Vite plug-in that automatically imports component library styles.

Overview of the main project folder Src

Here is the original project file directory.

Assets -- Static folder Components -- Component folder app.vue -- Page file main.ts -- Project entry file shims -- Vue.D. ts -- Type definition file (description file)Copy the code

So many files, we will not show one by one, mainly look at app. vue, main.ts, shims-vue.d.ts.

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
  name: 'App'.components: {
    HelloWorld
  }
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
Copy the code

main.ts

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Copy the code

shims-vue.d.ts

declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

Copy the code

Here, we see defineComponent as a Vue3 method. Why is it used here? To quote the official:

Implementationally, defineComponent only returns the objects passed to it. However, in terms of type, the returned value has a synthetic type constructor for manual rendering functions, TSX, and IDE tool support.

The introduction of vue – router4

Having looked at the base configuration, we are now ready to start introducing the Vue3 ecosystem.

Now when we install vue-Router version, we still install the 3.x version by default. Due to the big change of vuE3 update, vue-Router will also release the latest 4.x version for compatibility.

Here is router4’s official website:

https://next.router.vuejs.org/
Copy the code

1. Install

npm install vue-router@4
Copy the code

2. Configure the file

After installing the dependencies, create a router folder under the project folder SRC and create an index.ts file inside (since we are based on the TS project here).

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import Home from ".. /views/Home.vue";

const routes: Array<RouteRecordRaw> = [
    {
        path: "/".name: "Home".component: Home
    },
    {
        path: "/about".name: "About".component: () = >
            import(".. /views/About.vue")}];const router = createRouter({
    history: createWebHashHistory(),
    routes
});

export default router;
Copy the code

In addition, you need to import it in the main.ts file and register it.

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

Copy the code

To experiment, create a views folder under SRC with two page files inside. About.vue and home.vue.

home.vue

<template>
  <p class="txt">home</p>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";

@Options({

})
export default class Home extends Vue {}
</script>

<style scoped>
.txt{
  color: red;
}
</style>
Copy the code

about.vue

<template>
  <p>about</p>
</template>

<script>
export default {
name: "About"
}
</script>
Copy the code

Finally, you’re in the app.vue file.

<template>
  <router-link to="/">Home</router-link> |
  <router-link to="/about">About</router-link>
  <router-view />
</template>

<script lang="ts">
</script>
Copy the code

With that, Vue-Router4 was successfully introduced.

Introduce the CSS preprocessing language

Here, we introduce SCSS. Since we used vite, a build tool, to build the project, this is all we need.

npm install -D sass
Copy the code

We can see the official explanation:

Vite also provides built-in support for.scss,.sass,.less,.styl, and.stylus files. There is no need to install a specific Vite plug-in for them, but the corresponding preprocessor dependency itself must be installed.

So, you can use SCSS like this.

<template>
  <p class="txt">home</p>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";

@Options({

})
export default class Home extends Vue {}
</script>

<style scoped lang="scss">
.txt{
  color: red;
}
</style>

Copy the code

Use the Element Plus UI

We have successfully configured the Element Plus framework above, so we can use it this way.

<template>
  <p class="txt">home</p>
  <ElButton>The default button</ElButton>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { ElButton } from 'element-plus'

@Options({
  components: {
    ElButton
  }
})
export default class Home extends Vue {}
</script>

<style scoped lang="scss">
.txt{
  color: red;
}
</style>

Copy the code

Here, you’ll notice the introduction of vue-class-Component. What does it do?

Official Website:

https://class-component.vuejs.org/
Copy the code

Vue Class Component is a library that lets you make your Vue components in class-style syntax.

Vue class components is a library that allows you to create Vue components using class-style syntax.

For vuE3, we use Vue Class Component V8, which is version 8.

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

You can install it like this.

NPM I [email protected]Copy the code

Introducing vUE custom components

We often encapsulate components ourselves, so how did we introduce this in this project? Let’s create a components folder under the SRC directory and create a helloworld.vue file inside.

HelloWorld.vue

<template>
  <h1>{{ msg }}</h1>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue'
export default defineComponent({
  name: 'HelloWorld'.props: {
    msg: {
      type: String.required: true}},setup: () = > {
    const count = ref(0)
    return { count }
  }
})
</script>

<style scoped lang="scss">
a {
  color: #42b983;
}

label {
  margin: 0 0.5 em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: # 304455;
}
</style>

Copy the code

Then, we introduced it in app.vue.

<template>
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
  <router-link to="/">Home</router-link> |
  <router-link to="/about">About</router-link>
  <router-view />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
  name: 'App'.components: {
    HelloWorld
  }
})
</script>

<style >
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
Copy the code

The introduction of vuex4

Vuex is certainly a part of the Vue ecosystem, and in order to be compatible with VUE3, vuEX has also released version 4.0.

https://next.vuex.vuejs.org/
Copy the code

You can install it like this.

npm install vuex@next --save
Copy the code

You can create a store folder in the SRC folder and create an index.ts file inside it.

import { createStore } from "vuex";

export default createStore({
    state: {},
    mutations: {},
    actions: {},
    modules: {}});Copy the code

Then, you introduce it in the main.ts file like this.

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

createApp(App).use(router).use(store)
    .mount("#app");

Copy the code

conclusion

We’ve simply built a little demo here using Vite + TS +vue3, so if you want to take it a step further, you can follow me.

I created a technical exchange, article sharing group, the group has a lot of big factory front end big boss, follow the public account, click the menu below to learn more can add my wechat, look forward to your joining.

Public number: the front end of the road