创建 vue3 + vite
时间: 2023-09-03 11:09:30 浏览: 55
Vue3.0+Vite开发
要创建Vue3 + Vite项目,您需要先安装Node.js和npm。然后,按照以下步骤进行操作:
1. 安装Vue CLI:
```
npm install -g @vue/cli
```
2. 使用Vue CLI创建项目:
```
vue create my-project
```
3. 选择“Manually select features”选项来手动选择您需要使用的特性。选择“Babel”、“Router”、“Vuex”和“CSS Pre-processors”。
4. 选择“CSS Pre-processors”时,选择“Sass/SCSS (with dart-sass)”选项。
5. 等待安装完成后,进入项目目录:
```
cd my-project
```
6. 安装Vite:
```
npm install vite --save-dev
```
7. 在package.json文件中添加以下脚本:
```
"scripts": {
"dev": "vite",
"build": "vite build"
}
```
8. 创建一个main.js文件,以便在其中编写Vue代码:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
```
9. 在App.vue文件中编写Vue模板代码:
```vue
<template>
<div>
<h1>{{ greeting }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
greeting: 'Hello Vue3 + Vite!'
}
}
}
</script>
```
10. 运行开发服务器:
```
npm run dev
```
11. 在浏览器中打开http://localhost:3000/,您应该能够看到“Hello Vue3 + Vite!”的欢迎消息。
现在,您已经成功地创建了一个Vue3 + Vite项目!
阅读全文