其他分享
首页 > 其他分享> > Vite 创建一个简单模板vue2

Vite 创建一个简单模板vue2

作者:互联网

 

1.在桌面运行cmd,使用官方命令创建vite

 npm init vite@latest

2.回车

2.回车

直接cd vite-v2 进入vite-v2文件夹后输入 npm install 安装依赖

默认文件夹是这样的

在cmd继续安装vue2依赖命令

npm install vue@2.x vue-template-compiler@2.x -S

再安装对vite对vue2 支持命令

npm install vite-plugin-vue2 --dev

剩下就是创建文件,在根目录创建vite.config.js 文件

打开vite.config.js文件写入代码

import { createVuePlugin } from 'vite-plugin-vue2'

export default {
  plugins: [createVuePlugin()]
}

再根目录创建src文件目录把main.js拖进去

修改index.html文件

 <script type="module" src="/main.js"></script> 
改为
 <script type="module" src="/src/main.js"></script> 

在src文件目录里面新建App.vue 内容写入

<template>
  <div>Hello Vite Vue2</div>
</template>

修改 src/main.js,把默认的代码都删掉,写入新的代码

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

最后运行cmd 输入启动命令

npm run dev

打包命令

npm run build

 

标签:npm,vue,App,Vite,js,模板,vue2,vite
来源: https://www.cnblogs.com/zxh-bug/p/16647851.html