“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

Vue (2 x)

Vue environment configuration

The installation of the Node. Js

Vue depends on Node to run. Therefore, before installing Vue, go to the official website of Node to install Node. After the installation is complete, run the following command to check whether the installation is successful.

node -v
Copy the code

npm/yarn

NPM (Node Package Manager) is the main function of managing node packages, including: installation, uninstallation, update, and so on.

His unmodified source, is a foreign image, so often there will be packet loss or slow download speed, I suggest you change to Taobao source (Synchronized mirror made by Ali)

NPM / / temporary, permanent NPM registry install express/https://registry.npm.taobao.org/config set registry https://registry.npm.taobao.org npm install expressCopy the code

If yarn is used, download yarn from the official website and install it.

Vue-cli

npm install vue-cli -g
Copy the code

Vue CLI 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
Copy the code

    ), which depends on:

    • Can upgrade! ;
    • Built on WebPack, with reasonable default configurations! ;
    • Can be configured through the configuration file within the project! ;
    • Can be extended 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! .

Vue CLI is committed to standardizing the tool base in the Vue ecosystem. It ensures that the various build tools can be smoothly connected based on intelligent default configurations, so you can focus on writing your application instead of spending days worrying about configuration issues.

For now, Vue’s environment is temporarily configured! Now let’s go to a new Vue project.

Construction of Vue project (Vue-UI)

First open vS-Code and type:

vue ui
Copy the code

Wait a while, and a graphical management interface of Vue will open.

Click the button in the lower left corner of the small house to enter the project management home page

Click Create Project.

To initialize the Git repository, check open, default the package manager, and then enter the project name and click next

He will let us choose a set of default, the first figure, is the official Vue2 default template, the second is the default template Vue3, a third option is to let us manually configure the project configuration, and can be saved into the template, convenient use, next time the last one is from your git repository to pull a presupposition, as a preset in the project.

We chose manual configuration because it is easy for everyone to operate.

Let’s elaborate on what these options mean.

  • Choose the Vue version. This allows you to choose whether your project will be developed in Vue2 or Vue3
  • Babel is a JavaScript compiler.
  • TypeScript (developed by Microsoft) is a superset of JavaScript that can be compiled into JavaScript.
  • Router, vue-router, Router component
  • Vuex, provides state management in VUE
  • CSS pre-processors, CSS preprocessors, Less, Sass, Stylus.
  • Linter/Formatter, code quality check, code specification validation. (ESlint is really annoying)
  • Use the configuration file, this is in Chinese, I won’t explain, just tick it!

I checked 1, 2, Router, Linter/Formatter, use configuration file. (Not used in this demo because of Vuex)

The configuration page is displayed.

First, we see 2.x in the back, which is an option for Vue2 or Vue3.

Second, the daily closure is good, not for us.

The third is to let us choose a degree of rigor for code review.

Four options are provided:

  • ESlint with Error Prevention only
  • ESlint + Airbnb Config (hell)
  • ESlint + Standard Config
  • ESlint + Prettier

The notes I’ve annotated clearly state what these criteria look like. I chose the first one, but it doesn’t matter which one I choose. This can go in and change from the configuration file, but it’s a bit of a hassle.

Click Create and he will tell you whether to save the preset, you can choose according to your own situation.

So our project is created!

Hello Vue

Open your development tools (I’m using Vs Code)

Open the terminal for the project

The input

NPM Run serve or YARN ServeCopy the code

The first is the local address

The second is the network address

Let’s visit it in a browser:

At this point, a Vue project has been created.

The directory structure of Vue

  • Node_moudules: depends on where to save
  • Public: where static resources are stored
  • Dist: The directory that needs to be mounted after the project is packaged
  • SRC: Where the code is written
    • Assets: Static resources referenced in SRC (distinct from public static)
    • Componets: component
    • The router: routing
    • Views: (page)
    • App.vue: The page is shared
    • Main.js: global dependency or configuration
  • Package. json: Configure the basic information of the project and the approximate version of the dependencies. It is important to note that the dependency version of this file is only the approximate range
  • Package-lock-json: records the true version of node_modules dependencies
  • Readme. md: project description

Element-ui

Element-ui is the ele. me team’s component library based on Vue2, which is currently available with Vue2, Vue3, React, Augular and other frameworks.

I think it’s good for

His official documentation is very friendly and detailed, explaining the components, their properties, the hooks they provide, the parameters that trigger events, and so on.

He provides his own icon icon, so that when we use it will be very convenient, do not have to go to ali vector library to find every icon.

I think it’s bad

The make-or-break component, the make-or-break component, has a very high UI weight, which makes it very difficult for us to convert its styles.

When I was working on a Vue2+ Elemental-UI project last winter vacation, his el-table component had a bug. After deleting columns and adding columns, the index would jump or jump, resulting in two rows of index appearing in the DOM tree at the same time. After the official reaction, In February of this year, I was looking, and the bug has been removed.

Use the Element-UI

Before using, we need to add element dependencies to the project first. There are two ways: go to our Vue-UI panel, search for elements in plug-ins and dependencies, and install them, or use the terminal NPM tool to download the dependencies

npm i element-ui -S
Copy the code

After finishing, go to element and copy a piece of code and write it in the page (I wrote it in app.vue).

<el-row> <el-button> Default button </el-button> <el-button type="primary"> Main button </el-button> <el-button </el-button> <el-button type="info"> Information button </el-button> <el-button type="warning"> Warning button </el-button> < span style =" box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; word-break: inherit! Important;"Copy the code

I just copied it.

After pasting, directly NPM run serve

Is there an error? Of course, since we haven’t introduced Element into our project yet, we’ve just installed its dependencies.

In the main. In js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Copy the code

The first two sentences are introduction, and the next one is use. One cannot be without the other.

If you run into this error, don’t panic. You are missing the production environment for core.js

After running this on the terminal, continue to run your vue project and you will not report an error.

npm install --save core-js
Copy the code

Ok, let’s see what element looks like!

My app. Js:

<template> <div id="app"> <el-row> <el-button> Default button </el-button> <el-button type="primary"> Main button </el-button> <el-button </el-button> <el-button type="info"> Information button </el-button> <el-button type="warning"> Warning button </el-button> < span style =" box-sizing: border-box! Important; word-wrap: break-word! Important; word-wrap: break-word! Important; word-wrap: break-word! Important;"Copy the code

I deleted everything else just to make it easier to see.

In this way, our Element is referenced successfully.

The last

Component libraries improve the development efficiency of front-end staff, this is certain, but this does not mean that front-end development does not need to master THE knowledge of CSS, components are not universal, in the project, there must be more or less according to the state of the project to modify the components, so it is recommended that students want to learn CSS, It’s important to lay the groundwork (encapsulate your own component library in the future, but don’t change it as much as you want).