如何一步一步搭建Vite Vue项目

2022-10-07 今日头条 dirac

加入收藏

第1步. 对项目进行初始化操作：

npm init -y

由此生成package.json文件。

第2步. 安装Vite

npm install vite -D

安装成功后会在package.json文件中添加以下内容：

"devDependencies": {

"vite": "^3.1.6"

}

第3步. 安装Vue

npm install vue

安装成功后会在package.json文件中添加以下内容：

"dependencies": {

"vue": "^3.2.40"

}

第4步. 安装插件：

npm install @vitejs/plugin-vue -D

第5步. 在项目根目录中创建配置文件vite.config.js，内容如下：

import { defineConfig} from "vite";

import Vue from '@vitejs/plugin-vue'

export default defineConfig({

plugins: [Vue()]

})

第6步. 在项目根目录中创建入口文件index.html，内容如下：

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

第7步. 在src目录中新建main.js文件：

import { createApp } from "vue";

import App from "./App.vue";

createApp(App).mount('#app')

第8步. 在src目录中创建单组件文件App.vue，内容如下：

<h1>Hello Vite + Vue!</h1>

</template>

export default {

name: "App"

}

</script>

</style>

第9步. package.json文件中添加以下内容：

"scripts": {

"dev": "vite"

}

第10步. 运行项目：

npm run dev