Vue3 + Vite and VueCLI4 project construction

create by db on 2021-3-16 16:21:55

Recently revised in 2021-3-16 19:00:51

Idle time to have a tight mind, busy time to have leisure fun

Looking forward, looking forward, September 2020, Vuejs 3.0 was released; In February 2021, Vite 2.0 was released.

Especially small right with practical action to tell us – as long as the death of learning, to learn…

No way, roll up your sleeves and do it! Let’s see how to build vVue 3.0 with Vue_CLI4 and Vite.

preface

Vue 3.0 introduction

Newer faster and stronger!

What new features does vue.js 3.0 bring to us?

  • Performance: 1.2 ~ 2 times higher than vue2. X block
  • Tree Shaking Support: Compilation on demand, smaller
  • Composition API: Composition API, similar to React Hooks
  • Custom Renderer API: Exposes Custom rendering apis
  • Fragment, Teleport (Protal), Suspense: Three new components
  • Better TypeScript Support: Better support for TS

Vue – CLI 4 profiles

Make development easier!

Vue-cli 4 is a quick development Vue project construction tool launched by the official Vue team. It is a complete system for rapid development based on vue.js, providing:

  • Interactive project scaffolding via @vue/ CLI.
  • Zero configuration prototype development through @vue/ CLI + @vue/ CLI-service-global.
    • A runtime dependency (@vue/cli-service) that:
    • Can upgrade
    • Built on WebPack with reasonable default configuration;
    • It can be configured through the configuration file in the project;
    • Extensions can be made through plug-ins.
  • A rich collection of official plug-ins that integrate the best tools in the front-end ecosystem.
  • A fully graphical user interface for creating and managing vue.js projects.

Introduction of Vite

Make projects faster!

Vite is an unpackaged development server based on the Vue3 single file component, which does local rapid development startup:

  • Fast cold start, no need to wait for packing operation;
  • Instant hot module updates, the decoupling of replacement performance and number of modules allows the new to fly;
  • True on-demand compilation, no longer waiting for the entire application to compile, is a huge change.

This note aims to help Vue little white understand and apply Vue3 + Vite and VueCLI4 project command line build process, hope to help you.

References:

  • Vue3 website

  • Vue CLI website

  • Vite website

  • TypeScript official documentation

The body of the

Install tools

1. Update NPM to the latest version

Vue CLI 4.x Requires Node.js V8.9 or later (V10 or later is recommended)

Command to run

npm install -g npm

NPM automatically updates us to the latest version

After the update is complete, open the CMD management tool as the administrator, enter node -v, and press Enter to view the node version.

2. Install global VUE-CLI4.x scaffolding

First check our current Vue CLI version number and type it on the command line

vue -V

If 2.x. x appears, it indicates the vuE-cli2 we are currently installing;

Then we need to update the upgrade, command line type the following command, enter;

npm install -g @vue/cli

Check the vue-CLI version 4.x.x again, the update is successful.

Install global Vue 3.x

Command to run

$ npm install vue@next

Vue3 + Vue CLI 4 Construction project

Create a Vue project with VUE-cli4

Go to the folder where you need to create the project and open the command line.

Enter the following command and press Enter

vue create vue3-cli4-demo

Here vue3-cli4-demo refers to the project name. After this command is executed, a directory named vue3-cli4-demo will be created, which is the project we built.

There are three options:

  • Default ([Vue 2] babel, eslint): Default package, useVue 2providebabelandeslintsupport
  • Default (Vue 3 Preview) ([Vue 3] babel, eslint): Default package, useVue 3To providebabelandeslintsupport
  • Manually select features: Choose your own features to provide more feature choices. Like if you want supportTypeScript, you should choose this one.

You can use the up and down arrow keys to switch options. If Babel and ESLint support is all you need, select the first option and you’re done waiting for vUE to initialize the project.

Vue-cli4 supports 10 built-in features and can be selected from multiple options: use arrow keys to switch between feature options, use space bar to select the current feature, use A key to switch to select all, and use I key to flip options.

Here is a brief description of each function:

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, < I > to invert Selection) >(*) Select Vue version, This defaults to using the vue 2 () Babel // transcoder, which converts ES6 code to ES5 code for execution in the existing environment. TypeScript // TypeScript is a superset of JavaScript (postfix.js) (postfix.ts) that contains and extends JavaScript syntax and needs to be compiled and output to run in the browser. Router // Vuex // Vuex (VUE state management mode) () CSS pre-processors // CSS pre-processors (e.g. Less, sass) () Linter/Formatter // code style check and formatting (e.g. ESlint) () Unit Testing // Unit tests () E2E Testing // E2E (end to end) TestingCopy the code

I chose TypeScript, CSS pre-processors, and Linter/Formatter

Press Enter to proceed to the next step, which is followed by a more detailed selection of each of the previous options.

  • CSS: select SCSS/SASS

  • Linter/Formatter: Select Prettier

This step is to select the location of the configuration file. For Babel, PostCSS, etc., you can have your own configuration files:.babelrc,.postcssrc, etc. You can also put configuration information in package.json. In favor of friendly support for the Visual Studio Code editor (which by default looks for configuration files In the project root directory), choose In Dedicated Config Files to leave the configuration files outside

supplement

Save this as a preset for future projects? Do you want to save the current set of options for reuse next time you create a project? Select y.

After the selection, vue-CLI starts to initialize the project based on the previous selection.

Finally, the following code appears

🎉  Successfully created project vue3-cli4-demo.
👉  Get started with the following commands:

 $ cd vue3-cli4-demo
 $ npm run serve
Copy the code

The initialization is successful, and vuE-CLI4 has completed the project construction.

2. Go to your project folder

With the project set up, you can now access the project folder.

Enter the following command and press Enter to enter the new project.

cd vue3-cli4-demo

3. Start the project

With all the environment dependencies installed, let’s test out our new VUE project.

Type the following command and press Enter to start the project

npm run serve

The default browser access address is localhost:8080, as follows:

 App running at:
  - Local:   http://localhost:8080/
  - Network: http://***.***.***.***:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.
Copy the code

Open http://localhost:8080 or Network in your browser to see your project

Vue UI graphical interface to create projects

Vue-cli4.x also provides a graphical interface for managing and creating projects

Command line input

vue ui

It then automatically hits the browser page:

You can then follow the page buttons to step through common items.

Project package

Once the project is developed, it should be packaged and live. Vue-cli4 also provides packaged commands, executed in the project root directory:

npm run build

After executing, you can see that there is an additional dist directory in the project root directory, which contains all the static resources packaged and deployed directly to the static resource server.

In fact, at deployment time, note that assuming the static server’s domain name is http://static.baidu.com, So corresponding to visit < project root directory > / dist/index. The HTML URL must be http://static.baidu.com/index.html, other static resources and so on.

Project directory

│ browserslistrc │ gitignore │ postcss configuration │ babel.config.js │ cypress.json │ package.json // dependency │ Readme. md │ tsconfig.json // tsconfig │ esLint. Json // ESLint Config │ yarn.lock │ ├─public │ Favicon TXT │ │ ├─ ├─ ├─ SRC │ │ manifest. HTML │ manifest.json │ │ manifest. TXT │ │ ├─ SRC │ │ ├.txt │ ├ ─ ─ router. Ts // PWA configuration │ ─ ─ router. Ts // route │ ─ ─ shims-tsx.d.ts // TSX module configuration │ ─ shims-vue │ │ ├─ ├─ Components │ │ HelloWorld │ │ ├─ Vue module │ │ ├─ Assets │ │ Logo.png │ │ ├─ Components │ │ HelloWorld │ │ vuex └ ─ page views / / │ About. Vue │ Home. Vue │ └ ─ tests / / test cases ├ ─ e2e │ ├ ─ plugins │ │ index. The js │ ├ ─ specs │ │ test. The js │ └ ─ support │ commands.js │ index.js └─unit helloworld.specCopy the code

Vue3 + Vite construction project

1. Create a VUE project using Vite

Go to the folder where you need to create the project and open the command line.

Enter the following command and press Enter

npm init @vitejs/app vue3-vite-demo

Vue3-viet-demo here refers to the project name. After this command is executed, a directory named vue3-viet-demo will be created, which is the project we built.

You can select supported templates, including:

? Select a template: ...
> vanilla
  vue
  vue-ts
  react
  react-ts
  preact
  preact-ts
  lit-element
  lit-element-ts
Copy the code

You can use the up and down arrow keys to switch options. Use Enter to determine the template, and you’re done waiting for vUE to initialize the project.

I chose vuE-TS

Press Enter to go to the next step,

Finally, the following code appears

√ Select a template: · vue-ts

Done. Now run:

  cd vue3-vite-demo
  npm install
  npm run dev
Copy the code

The vue3-viet-Demo project is successfully initialized.

2. Go to your project folder

With the project set up, you can now access the project folder.

Enter the following command and press Enter to enter the new project.

cd vue3-vite-demo

3. Install dependencies

Because the templates are interdependent, we will now install dependencies.

Enter the following command and press Enter to install dependencies

npm install

4. Start the project

With all the environment dependencies installed, let’s test out our new VUE project.

Type the following command and press Enter to start the project

npm run dev

The result will be a browser access address default localhost:3000, as follows:

Vite v2.1.0 dev server running at: > Network: http:// * * *. * * *. * * *. * * * : 3000 / > Local: http://localhost:3000/ ready in 885ms.Copy the code

Open http://localhost:3000 or Network in your browser to see your project

A Vue3 project built from Vite supports TypeScript syntax, CSS preprocessor Sass, formatting code in the ESLint and Prettierrc styles

Install new dependency please add [– save] :

  npm i xxx --save
  / / or
  cnpm i xxx --save
  / / or
  yarn add xxx --save
  // --save if not written, the new dependency file will not be written to package.json
Copy the code

Project directory

| - node_modules - projects rely on package directory | - public, public file | -- the favicon. Ico - small ICONS at the front of the web site address bar | - SRC, source files directory, Programmers where main work | - assets - static file directory, picture icon, such as the website logo | - components -- Vue3. X | custom components directory -- App. Vue - the root component of the project, Single-page applications require | -- index. The CSS - generic project of CSS style to write here, main. Ts introduced | -- main. Ts - project entry documents, SPA single-page applications require entry file | -. - gitignore git management configuration file, Set the directory or file management | - index. The HTML - the default home page of the project, the Vue component needs to mount it to the file | - package - lock. Json - project package lock file, Used to prevent the package version is not the same mistakes | -- package. Json - project configuration file, package management, project name, version, and command | -- tsconfig. Json - TypeScript configuration files, mainly have compiled file specified and defined compiler options. | - vite. Config. Ts - vite total configuration fileCopy the code

conclusion

At this point, our Vue3.0 project is completed. The first step of the long March, come on!

To learn more about the basics of VUE, please click

  • CLI Construction Project (vue2.x)
  • Vue White Lesson (2) — Project Structure Analysis (vue2.x)
  • Vue CLI 3.x
  • Vue CLI 3.x

The road ahead is long, and I see no end.

Postscript: Hello friends, if you think this article is good, remember to give a thumbs-up or star, your thumbs-up and star is my motivation to write more and richer articles!Making the address



dbThe document library 由 dbusingCreative Commons Attribution – Non-commercial Use – Same way Share 4.0 International LicenseGrant permission.

Based on thegithub.com/danygitgitOn the creation of works.

Use rights other than those authorized by this License agreement may be obtained fromCreativecommons.org/licenses/by…Obtained.