可以预先看在ant-design-vue官网的 快速入门。
Vue和Vue CLI
Vue CLI = Vue.js + 一堆插件
创建项目
-
全局安装Vue CLI:
npm install -g @vue/cli
- 查看Vue CLI版本:
vue --version
或vue -V
- 安装Vue CLI时,最好添加版本号,如
npm install -g @vue/cli@4.5.13
- 查看Vue CLI版本:
-
创建一个项目:
vue create web
- Manually select features,按空格选中
- TypeScript
- Router
- Vuex
- Linter/Formatter
- Choose a version of Vue,3.x
- Use class-style component syntax? N
- Use Babel alongside TypeScript? n
- Use history mode for router? Y
- history:xxx/user
- hash:xxx/#/user
- Pick a linter/formatter config
- ESLint with error prevention only
- Pick additional lint feature
- Lint on save
- Where do you prefer palcing config for Babel,ESLint,etc.?
- In dedicated config files
- Save this as a preset for future projects?N
- Manually select features,按空格选中
-
启动项目
cd web
npm run serve
-
浏览器访问:
http://localhost:8080/
项目结构
main.ts
|App.vue
|index.html
Vue CLI 初始执行main.ts
,将内容页App.vue
渲染到index.html
,完成页面显示。package.json
完整的版本号定义:<主版本号><次版本号><修订版本号>"vue": "^3.0.0"
表示会自动安装3.0.0
及以上版本,注意哈,只是改变修订版本号,不会改变主版本号- 比如,
3.0.1
发布了,下载该源码后,npm install
时会下载3.0.1
,而不是3.0.0
。 - 比如,
4.0.0
发布了,下载该源码后,npm install
时会下载最新的3.x.x
,但不会下载4.0.0
。
- 比如,
"typescript": "~4.1.5"
,表示会自动安装4.1.x
的最新版本,注意哈,只改变修订版本号,不会改变次版本号- 比如,
4.1.6
发布了,npm install
时会下载4.1.6
- 比如,
4.2.0
发布了,npm install
时会下载最新的4.1.x
,但不会下载4.2.0
- 比如,
package-lock.json
package.json
中指定最新版本的主版本号,package-lock.json
则用来确定修订版本号。
比如,package.json
中指定"@vue/cli-service": "~4.5.0"
,package-lock.json
中则确定了修订版本号:"version": "4.5.13"
。
集成ant-design-vue
安装ant-design-vue
npm install ant-design-vue --save
下载的是ant-design-vue@1.7.5
,但ant-design-vue@1.x
不支持Vue3。npm install ant-design-vue@next --save
表示安装ant-design-vue
最新的未发布的版本,此时下载的是ant-design-vue@2.1.4
使用ant-design-vue
main.ts
中引入antdv
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
createApp(App).use(store).use(router).use(Antd).mount('#app')
Home.vue
中使用Button组件
<template>
<div class="home">
<a-button type="danger">Danger</a-button>
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
export default defineComponent({
name: 'Home',
components: {
HelloWorld,
},
});
</script>