vue3开发快速入门

vue3开发快速入门
vue2官方文档
 vue3官方文档

 创建项目

 方式1. 脚手架 vue-cli

vue-cli是一个全局安装的npm包，提供了终端里的vue命令，可以快速搭建一个新的vue项目，还可以通过vue ui命令，打开一套图形化界面管理项目。
安装脚手架：
```
npm install -g @vue/cli
1
```
或者
```
yarn global add @vue/cli
1
```
创建项目
```
vue create vue3-project
1
```
这个指令会引导我们对项目作一定的配置
```
默认配置
  选择vue3版本
自定义配置（Manually select features）：看自己需求 选择安装
  ◉ Babel
  ◯ TypeScript
  ◯ Progressive Web App (PWA) Support
  ◉ Router
  ◉ Vuex
  ◉ CSS Pre-processors
  ◉ Linter / Formatter
  ◯ Unit Testing
  ◯ E2E Testing
1
2
3
4
5
6
7
8
9
10
11
12
```
创建好项目后，通过以下步骤进入项目并启动
```
cd vue3-project
npm run serve
1
2
```
项目创建好了之后想要增加依赖
1. 在项目目录下使用npm等工具直接安装指定的依赖
2. 在项目的package.json文件中添加想要安装的依赖配置然后在项目目录下执行npm i

方式2.npm init vite（基于Vite）
```
npm init vite vue3-project-vite -- --template vue

✔ Select a framework: › vue
✔ Select a variant: › vue
1
2
3
4
```
创建好项目后，通过以下步骤进入项目并启动
```
cd vue3-project-vite
npm install
npm run dev
1
2
3
```
方式3.npm init vue（基于create-vue）

在命令行中运行下面的指令
```
npm init vue
1
```
这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。我们将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：
```
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.
1
2
3
4
5
6
7
8
9
10
11
12
```
在项目被创建后，通过以下步骤安装依赖并启动开发服务器：
```
cd <your-project-name>
npm install
npm run dev
1
2
3
```
vue3.2主要新特性

 变量和方法不需要return

起初 Vue3.0 暴露变量必须 return 出来，template中才能使用；这样会导致在页面上变量会出现很多次。很不友好，vue3.2只需在script标签中添加setup。可以帮助我们解决这个问题。

ref

将某个变量变为响应式数据
在js代码中使用ref定义的值需要通过.value来操作
在template中使用ref定义的值不需要通过.value来操作

reactive

reactive是将对象变为响应式数据
在js代码中和template中使用reactive定义对象的属性不需要通过.value来操作

 组件不需要注册

起初vue中组件引入后还需要在components中注册，vue3.2只需在script标签中添加setup。可以帮助我们解决这个问题。组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default 。
组件命名使用大驼峰HelloWorld，使用的时候可以用hello-world或者HelloWorld（强烈建议使用）都可以

组件传参也不需要用props和emit了，而是出了新的api defineProps

子组件向父组件抛出事件用 defineEmits

父组件获取子组件的属性 defineExpose

动态css

在css中可以通过v-bind绑定state中的变量
```
<script setup>
  import { reactive } from 'vue'
  const state = reactive({
    color: 'red'
  })
</script>
<style scoped>
  span {
    /* 使用v-bind绑定state中的变量 */
    color: v-bind('state.color');
  }  
</style>
1
2
3
4
5
6
7
8
9
10
11
12
```
Vue Router

Vuex & Pinia

组件库的变化

 element
```
  vue2 https://element.eleme.cn/#/zh-CN     	element-ui
  vue3 https://element-plus.gitee.io/zh-CN/ 	element-plus
1
2
```
antd
```
  vue2 https://antdv.com/components/overview
  vue3 https://www.antdv.com/docs/vue/migration-v3-cn
1
2
```
vant
```
  vue2 https://vant-contrib.gitee.io/vant/v2/				vant2
  vue3 https://vant-contrib.gitee.io/vant/#/zh-CN		vant3/vant4
1
2
```
vant组件库的使用

安装vant组件库
```
npm i vant
1
```
按需引入vant组件库
```
npm i unplugin-vue-components -D
1
```
修改配置文件修改后重启项目
组件注册方式
常用方式1
```
  import { Button, Cell, CellGroup } from "vant";

  export default defineComponent({
    components: {
      VanButton: Button,
      VanCell: Cell,
      VanCellGroup: CellGroup,
    },
    setup() {
      return {};
    },
  });
1
2
3
4
5
6
7
8
9
10
11
12
```
常用方式二
```
  <script setup>
    import { Button, Cell, CellGroup, Icon, Toast } from "vant";
  <script/>
1
2
3
```
特别提醒
1.Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 组件。
在使用函数组件时，unplugin-vue-components 无法自动引入对应的样式，因此需要手动引入样式。比如
// Toast
import { Toast } from ‘vant’;
import ‘vant/es/toast/style’;
详情可见官网 https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#4.-yin-ru-han-shu-zu-jian-de-yang-shi
2. 在使用

创建项目

方式1. 脚手架 vue-cli

方式2.npm init vite（基于Vite）

方式3.npm init vue（基于create-vue）

vue3.2主要新特性

变量和方法不需要return

ref

reactive

组件不需要注册

动态css

Vue Router

Vuex & Pinia

组件库的变化

element

antd

vant

vant组件库的使用