第一讲、创建运行Vue3.x项目、分析Vue目录结构

一、Vue 介绍#

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。目前最新版本是 Vue3.x。

Vue3.x 发布于 2020 年 9 月 19 日，在 Vue2.x 的基础上面进行了一些优化，对 TypeScript 有更好的支持。Vue3.x 的语法和 Vue2.x 非常相似，如果你已经会用 Vue2.x，那么学 Vue3.x 会非常简单。

Vue 官网地址：cn.vuejs.org/

Vue3.x Githtub 地址: github.com/vuejs/vue-next

Vue3.x 文档地址: v3.vuejs.org/

Vue3.x 中文文档地址：v3.cn.vuejs.org/

二、安装 Vue 官方脚手架以及创建项目#

注意: 安装脚手架创建项目之前之前，我们的电脑上必须得安装 Nodejs，推荐安装 nodejs 稳定版本

文档地址： v3.vuejs.org/guide/installation.ht...

Vue-cli 地址： cli.vuejs.org/

Vite 地址： github.com/vitejs/vite

通过 Vue-cli 脚手架工具可以让我们快速的搭建 vue 项目，目前 Vue 官方给我们提供了 2 个脚手架，Vue-cli 和 Vite。

一、通过 Vue-cli 创建我们的项目#

1.1、安装 Vue-cli，在同一个电脑上面只需要安装一次

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

如果电脑上面没有安装过 cnpm 可以通过下面命令安装：

npm install -g cnpm --registry=https://registry.npm.taobao.orgCopy

如果电脑上面没有安装过 yarn 可以通过下面命令安装：

npm i -g yarnCopy

1.2、通过 Vue-cli 创建项目

vue create hello-vue3

yarn serveCopy

二、通过 Vite 脚手架创建我们的项目#

2.1、使用 npm 创建

npm init vite-app <project-name>
cd <project-name>
npm install
npm run devCopy

2.2、使用 yarn 创建

yarn create vite-app <project-name>
cd <project-name>
yarn
yarn devCopy

三、目录结构介绍#

四、开发工具以及插件配置#

本作品采用《CC 协议》，转载必须注明作者和本文链接