Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how to build a project with vite+vue3.0+ts+element-plus". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to build a project with vite+vue3.0+ts+element-plus" can help you solve your doubts.

Vite released version 2.x, decided to come up with a simple project with a learning mentality, combined with element-plus, and the typescript that will be a must for every front end, to achieve the following.

Vite is a Web development and build tool driven by native ESM. In the development environment based on the browser native ES imports development, in the production environment based on Rollup packaging.

Vite action

Fast cold start: no need to wait for packaging operation

Instant hot module update: the decoupling of replacement performance and module number allows updates to fly

True on-demand compilation: no longer waiting for the entire application to be compiled, which is a huge change.

Environment in which to use

Node v12.19.0

@ vue/cli 4.5.8

Build a project

Npm init vite-app cd npm installnpm run dev

Or

Yarn create vite-app cd yarnyarn 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 basic public path when serving in production. @ default'/ 'alias: {' / @ /': pathResolve ('. / src'),}, outDir: 'vite-init',// build output will be placed in it. The old directory is deleted before building. @ default 'dist' minify:' esbuild',// build compression method hostname: 'localhost',// locally started service address port:' 8800charger / service port number open: when false,// starts the service, whether the browser opens https: false,// whether to enable https ssr: false,// whether server rendering optimizeDeps: {/ / introduce third-party configuration include: ['axios']} / / proxy: {/ / Agent 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 the 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": whether true,// enables all strict type checking options. "baseUrl": ". /", / / the base directory used to resolve non-absolute module names. "paths": {"/ @ / *": [". / src/*"]}, "noImplicitAny": true, / / throws an error for expressions and declarations that imply the 'any' type. "esModuleInterop": true, / / achieve interoperability between CommonJS and ES modules by creating namespace objects for all imports. It means "allowSyntheticDefaultImports". "experimentalDecorators": true, / / supports experimental support for ES7 decorators. "skipLibCheck": true, / / skip type checking of declaration files. "forceConsistentCasingInFileNames": true / / prohibits the use of inconsistent case references to the same file. }} App.vue

Modify app.vue

Export default {name: 'App', setup () {}} Views

Create a new views folder under src, and create an index.vue within the folder

Import HelloWorld from "/ @ / views/HelloWorld.vue"; import {defineComponent} from "vue"; export default defineComponent ({name: "Home", components: {HelloWorld}, setup () {return {msg: "hello World",};},})

PS: be sure to include a suffix when introducing a .vue file, otherwise the file will not be found

Create a HelloWorld.vue within the views folder

{{msg}} count is: {{realTime.count}} Click to jump to another route

Edit components/HelloWorld.vue to test hot module replacement.

Import {defineComponent, reactive} from "vue"; import {useRouter} from 'vue-router'export default defineComponent ({name:' Index', props: {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}}) router

Create a new router folder under src, and create an index.ts within the folder

Import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'const routes: Array = [{path:' /', component: () = > import ("/ @ / views/index.vue")},] export default createRouter ({history: createWebHistory (), routes}) main.ts

Change the original main.js to main.ts, and don't forget to change the index.html to main.ts after modification.

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 found that the following error occurred when introducing the .vue file into the ts file, but it did not affect the normal operation of the code.

Reason for error: typescript can only understand .ts files, not .vue files.

Solution: create a file with the suffix .d.ts under the project root or src folder and write the following:

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', this article "how to build a project with vite+vue3.0+ts+element-plus" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, Welcome to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.