使用官方提供的创建命令搭建
Vue3项目项目中包含Vite5,TypeScript,Vue Router,Pinia,Vitest,ESLint,Prettier
查看npm版本
终端执行node -v及npm -v查看环境
cool@localhost vue3-pureness % node -v
v16.20.1
cool@localhost vue3-pureness % npm -v
8.19.4
我的node版本是16.20.1；npm版本是8.19.4，接下来创建项目不成功可能就是npm版本造成的，安装个新的版本。
node及pnpm等开发环境问题请看
使用命令搭建项目
1. npm搭建方式
- 打开终端执行
npm create vue@latest
- 终端进行项目前期项目配置
cool@localhost vue3-pureness % npm create vue@latest
Need to install the following packages:
create-vue@3.9.1 // 此处稍微等待一下
Ok to proceed? (y) // 此处直接Enter
Vue.js - The Progressive JavaScript Framework
✔ 请输入项目名称： … vue-project
✔ 是否使用 TypeScript 语法？ … 否 / 是
✔ 是否启用 JSX 支持？ … 否 / 是
✔ 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是
✔ 是否引入 Pinia 用于状态管理？ … 否 / 是
✔ 是否引入 Vitest 用于单元测试？ … 否 / 是
✔ 是否要引入一款端到端（End to End）测试工具？ › 不需要
✔ 是否引入 ESLint 用于代码质量检测？ … 否 / 是
✔ 是否引入 Prettier 用于代码格式化？ … 否 / 是
正在构建项目 /Users/cool/study/code/web/vue3-pureness/vue-project...
项目构建完成，可执行以下命令：
cd vue-project
npm install
npm run format
npm run dev
搭建过程简单到令人发指，语言都是中文的，连后续要执行的命令都说明了，清清楚楚明明白白，感觉我的补充都如此的苍白
2. 全局安装vue 使用vue-cli安装
- 检查是否安装
vue
vue -v
- 全局安装
vue
npm install -g @vue/cli
- 通过
vue安装项目
vue create my-vue3-project
? Your connection to the default yarn registry seems to be slow.
Use https://registry.npmmirror.com for faster installation? Yes // 提示yarn安装慢，是否启用淘宝源，当时是yes
Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: PNPM // 选择包管理器 pnpm 很快，终端也没哟一些乱七八糟的输出
按照提示拉包
此处创建完看好你的文件结构，一定要进入命令创建的项目中，别直接执行拉包命令，我还是菜鸡的时候经常直接运行。
npm install
// 如果安装了cnpm或者pnpm也不用吝啬，直接使用
cnpm install
// 或者
pnpm install
// 还有简写
cnpm i
// 或者
pnpm i
运行项目
// 这个命令用于格式化代码,使其遵循一致的风格和规范;嗯。。。这个可以省略
npm run format
// 编译项目
npm run dev
复制提供的
Local地址：http://localhost:5173/在浏览器打开 此处可以配置直接打开浏览器详见 Vite配置工程执行run之后直接打开浏览器
安装常用三方插件
1. scss安装
// 全局安装
pnpm install -g sass
// 本项目安装
pnpm install sass --save-dev
2. element-ui安装
执行安装命令
pnpm install element-plus
完整引入
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus' // 新增
import 'element-plus/dist/index.css' // 新增
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus) // 新增
app.mount('#app')
3. Swipe滑动组件
pnpm install swiper
当您从节点模块导入 Swiper 自定义元素时，我们需要手动注册它。它只需执行一次，它会全局注册 Swiper 自定义元素。
<script setup lang="ts">
// 引入文件
import { register } from 'swiper/element/bundle';
// 注册
register();
</script>
大功告成！技术在会的人手上，总是很顺利，在不会的人手上，会遇到各种坑点，此篇总结两处坑：
- node和npm版本升级到较新的版本
- 执行
npm install一定要看清当前所在的文件夹
推荐一个写项目说明文档的工具
[](https://nodejs.org/)
[](https://nodejs.org/)
