Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

VUE3

V3.cn.vuejs.org/guide/insta…

Create it using vue-CLI

For Vue 3, you should use Vue CLI V4.5 available on NPM as @vue/ CLI.

Yarn Global add @vue/cli # or NPM install -g@vue /cliCopy the code

View the version: vue –version

E:\mysjc> vue --version
      @vue/cli 4.5.13
E:\mysjc>
Copy the code

Start building projects

Vue create Project nameCopy the code
  • Please pick a preset – SelectionManually select features
  • Check the features needed for your project – select onTypeScriptNote that space is selected and enter is the next step
  • Choose a version of vue.js that you want to start the project with – Choose3.x (Preview)
  • Use class-style component syntax – Enter directly
  • Use Babel alongside TypeScript – Press enter
  • Pick a linter/formatter config – Press Enter
  • Use history mode for router? – Enter
  • Pick a linter/formatter config – Press Enter
  • Pick Additional Lint features – Direct Carriage return
  • Where do you prefer placing config for Babel, ESLint, etc.? – Enter
  • Save this as a preset for future projects? – Enter

Start yarn Serve or NPM Run Serve

>yarn serve
Copy the code

Start-up success

Project Structure:

vue.config.js

If you go to the project directory and find no vue.config.js, manually create one that is the same as package.json

Vue. Config. Js configuration



// const proxyConfig =
// process.env.NODE_ENV === "production"
/ /? require("./proxy.pro.config")
// : require("./proxy.dev.config");


module.exports = {
  assetsDir: "static".runtimeCompiler: true.devServer: {
    host: "0.0.0.0"./ / the port number
    port: 8080.https: false.// https:{type:Boolean}
    // Configure automatic browser startup
    open: true./ / hot update
    hot: true.// Configure multiple cross-domains
    proxy: {}// proxy: proxyConfig.proxyList,}};Copy the code

If there are any options. The proxy should be {Object | Array} errors, will be

proxy:{}
Copy the code

Instead of

proxy:null
Copy the code

The public folder

The project has a public folder for files that don’t need to be packed by Webpack

This directory contains an index. HTML file, which is the basic HTML template for the entire application and also a packaged and compiled entry point for the project

main.ts

SRC directorymain.tsThe file, which has become TS and not JS in vue2, is a webpack entry file, as shown belowcreateAppThe method is the new global API of Vue 3, which is used to create a Vue application and mount it to the #app node

tsconfig.json

Ts v3.cn.vuejs.org/guide/types configuration file…

vue-router

The content has changed a little bit since VUe2, which is basically

  • Define some routes
  • Create a routing instance and deliver itroutesconfiguration
  • HTML 5 history pattern
  • Finally used in main.tz

Next.router.vuejs.org/zh/introduc…

The vue file

Compared with vue2

  1. <script>Label declarationlang="ts", using typescript
  2. usedefineComponentTo define components