升级 Vue 3

对于 Vue 3，你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli。要升级，你应该需要全局重新安装最新版本的 @vue/cli：

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

你还可以用这个命令来检查其版本是否正确： vue --version

创建项目：

vue create hello-world
# OR
vue ui

1. 按键盘↑ ↓选择手动配置项目，回车

2. 按空格进行选择，我选择了以下几项，回车：

3.选择 3.x， 回车：

4. 然后选择vue-router模式和css 预处理器less：

5. 选择eslint语法检测，并选择检测方式：

6. 是否使用配置文件，将插件的配置保存在各自的配置文件 (比如 .babelrc) 中。

7. 保存为新预设，将功能和配置保存为一套新的预设（可用于下次一键创建项目）

8. 选择包管理器：

9. 等待安装，安装完成后，运行项目:

cd hello-world
npm run serve

vue ui

使用命令vue ui，进行可视化创建项目 ，步骤和上面类似

目录结构

├── public                     // html出口模板
├── src                        // 源代码
│   ├── assets                 // 静态资源
│   ├── components             // 全局公用组件
│   ├── router                 // 路由
│   ├── store                  // 全局store管理
│   ├── views                  // views
│   ├── App.vue                // 入口页面
│   └── main.js                // 入口
├── .browserslistrc            // 浏览器的支持情况
├── .babel.config.js           // babel-loader 配置
├── .eslintrc.js               // eslint 配置项
├── .gitignore                 // git 忽略项
└── package.json               // package.json

引入UI组件库

1. 安装Ant Design of Vue 2.x

npm i --save ant-design-vue@next

2. 完整引入

// 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");

3. 按需加载

• 可以通过以下的写法来按需加载组件。

import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/lib/button/style'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件

• 如果你使用了 babel，那么可以使用babel-plugin-import来进行按需加载。你可以这么写：

import { Button } from 'ant-design-vue'

安装插件： npm i babel-plugin-import -D

在根目录新建 .babelrc

// .babelrc
{
    "plugins": [
        [
            "import",
            {
                "libraryName": "ant-design-vue",
                "libraryDirectory": "es",
                "style": true // `style: true` 会加载 less 文件， "style": "css"
            }
        ]
    ]
}

最后，就可以愉快的玩耍拉~

附上项目地址： github.com/Denny-di/vu…