创作背景
本文希望就vue3项目如何搭建，制作一期保姆级教程。希望读者能收获一站式搭建步骤。助力快速起盘前端项目。
术语理解
在安装环境之前先了解三个重要的概念，node.js, npm，vue-cli
- node.js
node.js是javascript的一种运行环境，是对Google V8引擎进行的封装，是一个服务器端的javascript的解释器。
- npm
npm是nodejs的包管理器（package manager）。 nodejs和npm是包含关系，nodejs中含有npm，安装好nodejs，cmd输入npm -v会发现npm的版本号，说明npm已经安装好。
- vue-cli Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统：是一个类似于 create-react-app 的可以用例命令行快速配置和生成一个 vue 项目。
对照后端，我们可以将这三个概念进行转化理解。
| 前端 | 后端 |
|---|---|
| node.js | jdk/jre |
| npm | maven |
| vue-cli | springboot |
安装命令
//假设已经安装了node.js, 检测node.js npm版本
node -v
npm -v
//安装vue3脚手架
npm install -g @vue/cli
//卸载Vue3脚手架
npm uninstall @vue/cli -g
//安装vite脚手架
npm install vite –g
//如果上条命令出现报错，npm ERR! arg Argument starts with non-ascii dash, this is probably invalid: –g//则修改成下面
npm install vite g
以上我们就将环境配置完成。 接下来进入项目创建。
npm init vite@latest <项目名称> -- --template vue
//构建完成后进入项目，执行如下命令
npm install
npm run dev
//就可以看到成功的页面。
效果页面
项目结构
Vue3+ts安装步骤
npm init vite <project_name>
选择Framework->Vue
选择TypeScript
创建成功后的项目结构
运行效果
