vue-cli 3 中结合Ant Design快速开发项目

安装和初始化

一、我们需要在命令行中首先安装 cnpm或 yarn包,安装过程中你可以用npm或cnpm或 yarn。

npm install -g cnpm --registry=https://registry.npm.taobao.org
或
npm install -g yarn --registry=https://registry.npm.taobao.org

npm或cnpm或 yarn三者区别(科普下)

  • npm安装插件是从国外服务器下载,npm的服务器在外国受网络影响大,可能出现异常,或安装失败。
  • cnpm这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”这就是cnpm由来。下载速度比npm快。
  • yarn像npm一样,yarn使用本地缓存。与npm不同的是,yarn无需互联网连接就能安装本地缓存的依赖项,它提供了离线模式。下载速度更快。

二、cnpm或yarn安装 vue-cli 工具

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

三、新建一个vue项目。

vue create antd-demo

并配置项目。

工具会自动初始化一个脚手架并安装 Vue 项目的各种必要依赖,如果安装失败,请删除跟目录所有node_modules文件夹,重新cnpm i或yarn install

然后我们进入项目并启动。

cd antd-demo
cnpm start

此时浏览器会访问 http://localhost:8080,看到 Welcome to Your Vue.js App 的界面就算成功了。

引入 antd 

这是 vue-cli 生成的默认目录结构。

├── README.md
├── babel.config
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
└── yarn.lock

现在从 yarn 或 npm 安装并引入 ant-design-vue。

yarn add ant-design-vue

修改 src/main.js,引入 antd 的按钮组件以及全部样式文件。

import Vue from "vue";
import Button from "ant-design-vue/lib/button";
import "ant-design-vue/dist/antd.css";
import App from "./App";

Vue.component(Button.name, Button);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

修改 src/App.vue的 template 内容。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <a-button type="primary">Button></a-button>
  </div>
</template>

好了,现在你应该能看到页面上已经有了 antd 的蓝色按钮组件,接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 vue-cli 的官方文档

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章