初体验Vue3

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任，Vue易学易用，性能出色，适用场景丰富的 Web 前端框架，他是国内目前前端最火的框架之一。

目前，在开发中，Vue有两个大版本可以选择Vue2和Vue3，老项目一般都是Vue2的，而新项目一般都选择Vue3开发

我们本套课程讲解版本为Vue3，因为Vue3涵盖了Vue2的知识体系，当然Vue3也增加了很多新特性

提示

学习Vue，一定要参考官方文档

官网文档：https://cn.vuejs.org/

基本使用

• 创建项目

  

  前提条件

  • 熟悉命令行
  • 已安装 15.0 或更高版本的 Node.js

  npm init vue@latest
  

  这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示

  如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。

• 安装依赖并启动

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

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

  这样就可以启动项目了，你会看到项目运行在本地的 5173 端口，如果你想让局域网内的其他人访问你正在开发中的项目，可以修改根目录下的package.json文件，修改如下：

  "scripts": {
     "dev": "vite --host",
  }
  

• 打包项目

  npm run build
  

  当你完成开发后，你可以使用该命令对你的项目进行打包，打包完成后，你会在你的根目录下看到一个dist文件夹。

  警告

  在项目开发后期，打包时亦或是启动时你可能会碰到不成功的情况，极大可能是因为安装的各种依赖项出现混乱，此时可跳过依赖项检查即可

  "scripts": {
     "dev": "set NODE_OPTIONS=--openssl-legacy-provider &&  vite --host"
  }
  

  npm install --save XXX --legacy-peer-deps
  

目录结构

我们通过Vue命令行工具 npm init vue@latest 创建项目，会出现很多文件及文件夹

└─ 项目名
   └─  .vscode     --- VSCode工具的配置文件夹
   └─  node_modules   --- Vue项目的运行依赖文件夹
   └─  public      --- 资源文件夹（浏览器图标）
   └─  src       --- 源码文件夹
   └─  .gitignore    --- git忽略文件
   └─  index.html    --- 入口HTML文件
   └─  package.json   --- 信息描述文件
   └─  README.md    --- 注释文件
   └─  vite.config.ts  --- Vue配置文件 
   └─  env.d.ts  --- 声明文件 
   └─  tsconfig.json  --- ts配置文件