Vite方式
npm
$ npm create vite <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
yarn方式
$ yarn create vite <project-name>
$ cd <project-name>
$ yarn
$ yarn dev
项目入口文件为 main.js，与Vue CLI方式一致，差别就是多了个vite.config.js配置文件。
<project-name>
├─ .gitignore
├─ index.html
├─ package.json
├─ public
│ └─ favicon.ico
├─ README.md
├─ src
│ ├─ App.vue
│ ├─ assets
│ │ └─ logo.png
│ ├─ components
│ │ └─ HelloWorld.vue
│ └─ main.js
├─ vite.config.js
└─ yarn.lock
两种方式创建的package.json文件不同，Vue CLI方式的package.json文件如下：
{
"name": "<project-name>",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"vue": "^3.0.4"
},
"devDependencies": {
"vite": "^1.0.0-rc.13",
"@vue/compiler-sfc": "^3.0.4"
}
}
Vite方式的package.json文件如下：
{
"name": "<project-name>",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.25"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.3.1",
"vite": "^2.9.2"
}
}
两个底层工具 @vue/compiler-sfc和 @vitejs/plugin-vue提供对 Vue 单文件提供支持。```
│ └─ main.js
├─ vite.config.js
└─ yarn.lock
两种方式创建的package.json文件不同，Vue CLI方式的package.json文件如下：
```
{
"name": "<project-name>",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"vue": "^3.0.4"
},
"devDependencies": {
"vite": "^1.0.0-rc.13",
"@vue/compiler-sfc": "^3.0.4"
}
}
```
Vite方式的package.json文件如下：
```
{
"name": "<project-name>",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.25"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.3.1",
"vite": "^2.9.2"
}
}
```
两个底层工具 @vue/compiler-sfc和 @vitejs/plugin-vue提供对 Vue 单文件提供支持。
Vite方式#
npm
$ npm create vite <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
yarn方式
$ yarn create vite <project-name>
$ cd <project-name>
$ yarn
$ yarn dev
\
