Implementation of vite+vue3.0+ts+element-plus to quickly build a project

vite function
Use Environment
Build the project
Configuration

vite.config.ts
tsconfig.json
App.vue
Views
router
main.ts

Vite has released version 2.x. I decided to create a simple project with the intention of learning it. I combined element-plus and typescript, which will become a must-know for every front-end developer, and implemented the following content.

vite is a web development build tool powered by native ESM. In the development environment, it is developed based on the browser's native ES imports, and in the production environment, it is packaged based on Rollup.

vite function

Fast cold start: no need to wait for packaging operations;
Instant hot module updates: Decoupling replacement performance and module quantity makes updates fast;
True on-demand compilation: No more waiting for the entire application to be compiled, which is a huge change.

Use Environment

node v12.19.0
@vue/cli 4.5.8

Build the project

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

Configuration

vite.config.ts

vite.config.ts is equivalent to vue.config.js in @vue-cli project

import path from "path";

const pathResolve = (pathStr: string) => {
  return path.resolve(__dirname, pathStr);
}

const config = {
  base: './', //The base public path when serving in production. @default '/'
  alias: {
    '/@/': pathResolve('./src'),
  },
  outDir: 'vite-init', // where the build output will be placed. The old directory will be deleted before building. @default 'dist'
  minify: 'esbuild', //Compression method during build hostname: 'localhost', //Local service address port: '8800', //Service port number open: false, //Whether to open https in the browser when starting the service: false, //Whether to open https
  ssr: false, //Whether to render on the server side optimizeDeps: { //Introduce third-party configuration include: ['axios']
  },
  // proxy: {//Proxy configuration// '/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", //Specify the target version of ECMAScript: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'.
    "module": "commonjs", //Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'.
    "strict": true, //Whether to enable all strict type checking options.
    "baseUrl":"./", //Base directory used to resolve non-absolute module names.
    "paths": {
      "/@/*": ["./src/*"]
    },  
    "noImplicitAny": true, //Raises an error for expressions and declarations that have an implicit 'any' type.
    "esModuleInterop": true, //Enable interoperability between CommonJS and ES modules by creating namespace objects for all imports. Implies "allowSyntheticDefaultImports".
    "experimentalDecorators": true, //Support experimental support for ES7 decorators.
    "skipLibCheck": true, //Skip type checking of declaration files.
    "forceConsistentCasingInFileNames": true //Disable inconsistent case references to the same file.
  }
}

App.vue

Modify app.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <router-view />
</template>

<script>
export default {
  name: 'App',
  setup() {

  }
}
</script>

Views

Create a new views folder under src and create index.vue in the folder

<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: When importing .vue files, be sure to bring the suffix, otherwise it will report that the file cannot be found

Create HelloWorld.vue in the views folder

<template>
  <h1>{{ msg }}</h1>
  <button @click="realTime.count++">count is: {{ realTime.count }}</button>
  <button @click="handleclick">Click to jump to other routes</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: 'Welcome to 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

Create a new router folder under src and create index.ts in the folder

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

Change the original main.js to main.ts. After the modification, don't forget to change the index.html to main.ts as well.

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');

Careful students may have discovered at this time: the following error occurs when the .vue file is introduced in the ts file, but it does not affect the normal operation of the code

Error reason: Typescript can only understand .ts files, not .vue files

Solution: Create a file with the suffix .d.ts in the project root directory or src folder and write the following content:

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'

Now that the project is complete, you can happily write code.

This is the end of this article about the implementation of vite+vue3.0+ts+element-plus quick project construction. For more related vite+vue3.0+ts+element-plus construction content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: