Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is the method of building environment in Vue3.0". In daily operation, I believe that many people have doubts about the method of building environment in Vue3.0. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "what is the method of building environment in Vue3.0?" Next, please follow the editor to study!

Initialize the project using vite

Vite introduction

Vite is a new tool invented by you Da Da this year, and you Da Da's description of vite is as follows: Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production. Vite is a Web development and build tool driven by native ES Module. In the development environment based on the browser native ES imports development, in the production environment based on Rollup packaging.

The above paragraph mentions a keyword ES Module. What is this? For detailed introduction, you can visit https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules to check. Let's make a long story short here. In the earliest days, there was no front-end engineering, and then we wrote javascript to a file and then referenced it through script tags. Later, as the front-end grew stronger and stronger, the dependencies between js became more and more complex. At this time, we need a mechanism that can split the JavaScript program into separate modules that can be imported on demand to maintain this dependency, followed by the birth of AMD,CMD and so on. ES Module is the function that the native module supported by the browser depends on.

Why use vite?

Why did you Da Da launch vite? when we use webpack, it takes dozens of seconds or even more than a minute to start a project every time we develop, which is relatively slow, and the hot update is also slow. The main feature of vite is that it is fast. This is how the official website describes the characteristics of vite.

Fast cold start

Instant module hot update

True on-demand compilation

How fast is it? let's try to build a new project first.

Initialize the vite project

Initialize the project, open a terminal window in the workspace, or cmd for window users, and then execute the following command

Yarn create vite-app my-vue3

After execution, the following content will be output. You can see that the new project is very fast, using only 1.63s.

two。 After initializing the project, enter it into the project through cd my-vue3, and then execute the yarn installation dependency (Taobao image is recommended here, which is faster)

3. After dependent installation, you need to start the project through yarn dev.

Do you instantly experience the feeling of starting the project in a second? after starting, you can access the project through http://localhost:3000.

View project structure

After opening the project using vscode, you can see that the new project structure is basically the same as the project structure created by vue-cli4, both App.vue and main.js that we are familiar with.

View the contents of the main.js file

Open main.js

Import {createApp} from 'vue' import App from'. / App.vue' import'. / index.css' createApp (App) .mount ('# app')

Found that the way to create Vue has changed, the original is through the new Vue method to initialize the Vue, in Vue3.0, modify in order to use the createApp way, more about the use of Vue3.0, we will gradually explain to you in a later series of articles.

Configure typescript

Typescript has now become one of the front-end essential skills, and a large number of projects are being developed based on typescript. When using Vue2.0, it is a bit awkward to use ts development features because Vue2.0 does not support typescript. But when it comes to Vue3, its own source code is based on ts, so it naturally has good support for ts. Configuring typescript with vite is simple and requires only the following steps.

Install typescript

Yarn add typescript-D

two。 Initialize tsconfig.json

# then execute the following command in the console

Npx tsc-init

3. Change main.js to main.ts, and also modify the references in index.html to main.ts. You also need to modify App.vue and HelloWorld.vue files as follows

Import HelloWorld from'. / components/HelloWorld.vue' export default {name: 'App', components: {HelloWorld}}

After the modification, restart can access the project. Although this configuration is fine, when you open main.ts, you will find that import App from App.vue will report an error: Cannot find module'. / App.vue' or its corresponding type declarations.,. This is because ts does not recognize the vue file yet, so you need to configure the following:

Add a shim.d.ts file to the project root

Add the following

Declare module "* .vue" {import {Component} from "vue"; const component: Component; export default component;}

Then you can happily use ts in your components.

Configure vue-router

In Vue2.0, we usually choose to use vue-router for routing, but we can still use vue-router in Vue3.0, but like Vue3.0, the current version of vue-router is also the beta version. At the time of this writing, the version is 4.0.0-beta7.

Install vue-router

Because the current version of vue-router for vue3.0 is still the beta version, it cannot be installed directly through yarn add vue-router. Instead, the version number is required.

Yarn add vue-router@4.0.0-beta.7

Configure vue-router

Create a new router directory under the project src directory, then add the index.ts file and add the following to the file

Import {createRouter, createWebHashHistory} from 'vue-router' / / in the new version of Vue-router, you need to use createRouter to create a routing export default createRouter ({/ / specify the route pattern, here you use the hash pattern history: createWebHashHistory (), / / routing address routes: []})

Just as the new Vue3.0 initialization method has changed, the vue-router initialization mode has also changed to initialize the route through createRouter.

Introduce router into main.ts

Modify the contents of the main.ts file as follows

Import {createApp} from 'vue' import App from'. / App.vue' import'. / index.css' import router from'. / router/index' const app = createApp (App) / / install the routing plug-in into app via use app.use (router) app.mount ('# app')

Configure vuex

Like vue-router, the new vuex is currently in beta version, and the current version is 4.0.0-beta.4

Install vuex

Yarn add vuex@4.0.0-beta.4

Configure vuex

Create a new store directory under the project src directory and add the index.ts file with the following

Import {createStore} from 'vuex' interface State {userName: string} export default createStore ({state (): State {return {userName: "Zijun",};},})

Introduce into main.ts

Import {createApp} from 'vue' import App from'. / App.vue' import'. / index.css' import router from'. / router/index' import store from'. / store/index' const app = createApp (App) app.use (router) app.use (store) app.mount ('# app')

Develop TodoList

Through the above series of operations, our development environment has been configured, and then we will first develop a TodoList through the new development environment to verify whether it is normal.

Add a todolist page

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

First, let's create a new views directory under the src directory, then create a new file todo-list.vue in it, and add the following to the file

Add to-do list ({{todos.length}}) {{item.text}} done list ({{dones.length}}) {{item.text}} / / in vue2 data uses reactive instead of import {reactive in vue3 Computed} from 'vue' import {useRouter} from' vue-router' export default {/ / setup is equivalent to beforeCreate and created of vue2.0 Is a new property of vue3. All operations are completed in this attribute. Setup (props, context) {/ / initializes a responsive data through reactive. Very similar to Vue.observer in Vue2.0 const state = reactive ({todoList: [{id: 1, done: false, text: 'eat'}, {id: 2, done: false, text: 'sleep'}, {id: 3 Done: false, text: 'beat Doudou'}] Todo:''}) / / generate a to-do list using the calculation attribute const todos = computed (() = > {return state.todoList.filter (item = >! item.done)}) / / generate the done list using the calculation attribute const dones = computed () = > {return state.todoList.filter (item = > item.done)}) / / modify to-do status const handleChangeStatus = (item Status) = > {item.done = status} / / add to-do const handleAddTodo = () = > {if (! state.todo) {alert ('Please enter to-do items') return} state.todoList.push ({text: state.todo, id: Date.now () Done: false}) state.todo =''} / / in Vue3.0 All data and methods go out through return in setup, and then use return {state, todos, dones, handleChangeStatus, handleAddTodo}. Todo-list {text-align: center in template }. Todo-list ul li {list-style: none;}

Adjust the rout

First, modify the contents of the App.vue file to

Export default {name: 'App'}

two。 Then modify the router/index.ts file to add a new route

Import {createRouter, createWebHashHistory} from 'vue-router' / / in the new version of Vue-router You need to use createRouter to create a routing export default createRouter ({/ / specify the pattern of the route, here using the hash pattern history: createWebHashHistory (), / / routing address routes: [{path:'/ todolist') / / you must add the .vue suffix component: () = > import ('.. / views/todo-list.vue')}]})

At this point, we can access TodoList through http://localhost:3000/#/todolist. The effect is shown below.

At this point, the study of "what is the method of building the environment in Vue3.0" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.