To upgrade the Vue 3

For Vue 3, you should use Vue CLI V4.5 available on NPM as @vue/ CLI. To upgrade, you should need to globally reinstall the latest version of @vue/cli:

npm install -g @vue/cli
# OR
yarn global add @vue/cli
Copy the code

You can also check if the version is correct with this command: vue –version

Create a project:

vue create hello-world
# OR
vue ui
Copy the code
  1. According to the keyboardWrite leftSelect the manual configuration item and press Enter

  1. According to theThe blank spaceTo select, I select the following items and press Enter:

3. Select3.x, enter:

  1. Then selectvue-routerPatterns and CSS preprocessorsless:

  1. Select esLint syntax detection and select the detection mode:

  1. Whether to use a configuration file, save the plug-in’s configuration in its own configuration file (e.g.babelrc).

  1. Save as new Presets, save functions and configurations as a new set of presets (available for next one-click project creation)

  1. Select package Manager:

  1. Wait for installation. After installation, run the project:
cd hello-world
npm run serve
Copy the code

vue ui

Using the commandvue uiTo create the project visually, the steps are similar to the above

The directory structure

├─ public // HTML Export Template ├─ SRC // source code │ ├─ Assets │ ├─ Components │ ├─ Router │ ├─ Store Global store management │ ├ ─ ─ views / / views │ ├ ─ ─ App. Vue / / entry page │ └ ─ ─ the main, js / / entrance ├ ─ ─ the browserslistrc / / browser support ├ ─ ─ ├─ ├─ ├─.git ├─ package.json //.babel.config.js // babel-loader Configures ├─.eslintrc.js // eslint configures ├─.gitignore // gitignore ├─ package.json // package.jsonCopy the code

Introduce the UI component library

  1. The installationAnt Design of Vue 2.x
npm i --save ant-design-vue@next
Copy the code
  1. A complete introduction
// main.js
import { createApp } from 'vue';
import App from './App';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

const app = createApp();
app.use(Antd);
app.mount("#app");
Copy the code
  1. According to the need to load
  • Components can be loaded on demand by writing the following.
import Button from 'ant-design-vue/lib/button'; import 'ant-design-vue/lib/button/style'; // Ant-design-vue /lib/button/style/ CSS loads the CSS fileCopy the code
  • If you use Babel, you canbabel-plugin-importTo load on demand. You can write it like this:
import { Button } from 'ant-design-vue'
Copy the code

Install plugin: NPM I babel-plugin-import -d

Create.babelrc in the root directory

// .babelrc { "plugins": [ [ "import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": True // 'style: true' will load less file, "style": "CSS"}]]}Copy the code

Finally, you can play happily pull ~

Attached is the project address: github.com/Denny-di/vu…