Vue3项目搭建教程（create-vue）

前置条件 - 已安装16.0或更高版本的Node.js

create-vue

create-vue是一个脚手架工具，用来快速创建v3的项目。（Vuecli用来创建v2的项目）

 使用 create-vue 创建 vue3 项目

npm init vue@latest

将会看到一些如 TypeScript 和 pinia 支持之类的可选功能提示

Vue.js - The Progressive JavaScript Framework
 
√ Project name: ... demo
√ 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 an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
 
Scaffolding project in D:\Vue3\learnvue\code\demo...

那么其中每一项所代表什么呢？

• Project name：------> 项目名称，默认值：vue-project，可输入想要的项目名称，此处我写的是：demo。
• Add TypeScript? ------> 是否加入TypeScript组件？默认值：No。
• Add JSX Support? ------> 是否加入JSX支持？默认值：No。
• Add Vue Router for Single Page Application development? ------> 是否为单页应用程序开发添加Vue Router路由管理组件？默认值：No。
• Add Pinia for state management? ------> 是否添加Pinia组件来进行状态管理？默认值：No。
• Add Vitest for Unit testing? ------> 是否添加Vitest来进行单元测试？默认值：No。
• Add an End-to-End Testing Solution?------> 是否添加端到端测试？默认值No。
• Add ESLint for code quality? ------> 是否添加ESLint来进行代码质量检查？默认值：No。

创建成功后执行以下命令安装依赖并启动服务器

cd demo
npm install
npm run dev

 启动后打开本地的服务地址即可，打开后如下图所示

 

现在已经可以运行起一个 Vue 项目！

请注意，生成的项目中的示例组件使用的是组合式 API 和 <script setup>，而非选项式 API。