vue入门-创建项目

通过vite工具创建项目

❯ npm create vite

✔ Project name: … aaa
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

Done. Now run:

  cd aaa
  npm install
  npm run dev

创建出来的项目比较简洁，文件相对较少。

❯ tree aaa
aaa
├── README.md
├── index.html
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.vue
│   ├── assets
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   └── style.css
└── vite.config.js

运行起来的页面也很简单。

通过vue工具创建项目

❯ npm create vue

Vue.js - The Progressive JavaScript Framework

✔ 请输入项目名称： … bbb
✔ 是否使用 TypeScript 语法？ … 否 / 是
✔ 是否启用 JSX 支持？ … 否 / 是
✔ 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是
✔ 是否引入 Pinia 用于状态管理？ … 否 / 是
✔ 是否引入 Vitest 用于单元测试？ … 否 / 是
✔ 是否要引入一款端到端（End to End）测试工具？ › 不需要
✔ 是否引入 ESLint 用于代码质量检测？ … 否 / 是
✔ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) … 否 / 是

正在初始化项目 /Users/xuxicheng/dev/test/vuetest/bbb...

项目初始化完成，可执行以下命令：

  cd bbb
  npm install
  npm run dev

这个文件的数量相比于vite来说稍微多了一些，不如上面的那个简洁。

❯ tree bbb
bbb
├── README.md
├── index.html
├── jsconfig.json
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── base.css
│   │   ├── logo.svg
│   │   └── main.css
│   ├── components
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   └── icons
│   │       ├── IconCommunity.vue
│   │       ├── IconDocumentation.vue
│   │       ├── IconEcosystem.vue
│   │       ├── IconSupport.vue
│   │       └── IconTooling.vue
│   └── main.js
└── vite.config.js

搭建出来的页面也有些繁琐，不如前面那个简洁。

npm create 与 init

create命令是init命令的别名，两个命令的效果是一模一样的。

init更简洁，只有4个字符，输入时能省俩字符。但是init的字面意思不如create简单直接，create更容易理解和记忆，方便沟通分享。