Vite创建Vue2项目
注意:在 Vite创建项目 中讲到,Vite 官方对 Vue 的支持只针对于Vue3.x 版本,而对于 Vue2.x 是不支持的。使 Vite 支持 Vue2.x,是需要安装插件来实现官方vue2插件1.使用vite创建基础项目 创建方式这里我使用的是npm(个人常用npm,无关其他):$ npm create vite@latest2.输入项目名按个人需求取即可,我这里随便叫一个vue2吧? P
·
注意:在 Vite创建项目 中讲到,Vite 官方对 Vue 的支持只针对于Vue3.x 版本,而对于 Vue2.x 是不支持的。使 Vite 支持 Vue2.x,是需要安装插件来实现 官方vue2插件
1.使用vite创建基础项目 创建方式
这里我使用的是npm(个人常用npm,无关其他):
$ npm create vite@latest
2.输入项目名
按个人需求取即可,我这里随便叫一个vue2吧
? Project name: vue2
3.选择框架
? Select a framework: » - Use arrow-keys. Return to submit.
> vanilla // 原生js
vue // vue3
react // react
preact // 轻量化react框架
lit // 轻量级web组件
svelte // svelte框架
这里需要选择的是vanilla
,因为选择vue
直接创建的就是vue3项目
? Select a variant: >>Use arrow-keys. Return to submint.
> vanilla
vanilla-ts
如果你要用typescript的话就选着vanilla-ts
4.进入项目安装vue2插件
$ cd vue2
$ npm install
$ npm install vite-plugin-vue2 -D
新建vite.config.js
文件
// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'
export default {
plugins: [
createVuePlugin(/* options */)
],
}
5.安装vue
由于直接npm install vue
安装的是最新的vue,即vue3,所以在安装vue的时候需要带上你所需的版本号,这里我用的是v2.6.14
$ npm install vue@2.6.14 -S
6.修改项目结构
- 创建src文件夹
- 将 main.js 移入src 文件夹中,并修改:
// main.js
import Vue from "vue";
import App from "./App.vue"
new Vue({
el: "#app",
render: (h) => h(App)
}).$mount();
- 修改
index.html
中对main.js
的引用路径:<script type="module" src="/src/main.js"></script>
- 在src文件中创建
App.vue
,并修改:
<template>
<div>Vue 2</div>
</template>
7.启动项目
- 进入项目:
cd vue2
- 安装依赖:
npm install
- 运行项目:
npm run dev
或npx vite
- 打包项目:
npm run build
或npx vite build
结果
2022/5/18更新
更多推荐
已为社区贡献5条内容
所有评论(0)