vue3开发快速入门

vue2官方文档
vue3官方文档

创建项目

方式1. 脚手架 vue-cli

vue-cli是一个全局安装的npm包，提供了终端里的vue命令，可以快速搭建一个新的vue项目，还可以通过vue ui命令，打开一套图形化界面管理项目。
安装脚手架：

npm install -g @vue/cli

或者

yarn global add @vue/cli

创建项目

vue create vue3-project

这个指令会引导我们对项目作一定的配置

默认配置
  选择vue3版本
自定义配置（Manually select features）：看自己需求 选择安装
  ◉ Babel
  ◯ TypeScript
  ◯ Progressive Web App (PWA) Support
  ◉ Router
  ◉ Vuex
  ◉ CSS Pre-processors
  ◉ Linter / Formatter
  ◯ Unit Testing
  ◯ E2E Testing

创建好项目后，通过以下步骤进入项目并启动

cd vue3-project
npm run serve

项目创建好了之后想要增加依赖
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

创建好项目后，通过以下步骤进入项目并启动

cd vue3-project-vite
npm install
npm run dev

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

在命令行中运行下面的指令

npm init vue

这一指令将会安装并执行 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.

在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

cd <your-project-name>
npm install
npm run dev

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>

Vue Router

Vuex & Pinia

组件库的变化

element

  vue2 https://element.eleme.cn/#/zh-CN     	element-ui
  vue3 https://element-plus.gitee.io/zh-CN/ 	element-plus

antd

  vue2 https://antdv.com/components/overview
  vue3 https://www.antdv.com/docs/vue/migration-v3-cn

vant

  vue2 https://vant-contrib.gitee.io/vant/v2/				vant2
  vue3 https://vant-contrib.gitee.io/vant/#/zh-CN		vant3/vant4

vant组件库的使用

安装vant组件库

npm i vant

按需引入vant组件库

npm i unplugin-vue-components -D

修改配置文件 修改后重启项目
组件注册方式
常用方式1

  import { Button, Cell, CellGroup } from "vant";

  export default defineComponent({
    components: {
      VanButton: Button,
      VanCell: Cell,
      VanCellGroup: CellGroup,
    },
    setup() {
      return {};
    },
  });

常用方式二

  <script setup>
    import { Button, Cell, CellGroup, Icon, Toast } from "vant";
  <script/>

特别提醒
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. 在使用<script setup>中到如组件时要注意
1. 使用组件不要用单标签
2. 使用组件标签名不要省略 要用全称 <van-cell-group> 或者 <VanCellGroup>
3. 由于导入的是Button 但是使用的是van-button所以eslint会检测、报错 那么我们要让eslint忽略这个问题 // eslint-disable-next-line no-unused-vars

 <van-cell-group>
   <van-cell
     title="单元格"
     value="内容"
   ></van-cell>
   <van-cell
     title="单元格"
     value="内容"
   ></van-cell>
 </van-cell-group>
 // eslint-disable-next-line no-unused-vars
 import { Button, Cell, CellGroup, Icon, Toast } from "vant";