美文网首页
vite+vue2+js+vuex项目搭建

vite+vue2+js+vuex项目搭建

作者: buer_jing | 来源:发表于2023-06-13 17:24 被阅读0次

提前说明

# npm 6.x
npm create vite@latest 项目名称 --template 模板名称

# npm 7+, extra double-dash is needed:
npm create vite@latest 项目名称 -- --template 模板名称

# yarn
yarn create vite 项目名称 --template 模板名称

# pnpm
pnpm create vite 项目名称 --template 模板名称

选择所需的模板(vue2 选择 vanilla

模板列表

示例(vue为2.7.14版本)

1.创建项目 vite-vue2-js

yarn create vite vite-vue2-js --template vanilla

2.下载依赖

yarn

3.下载 vue2 相关依赖

yarn add vue@2.7.14 vue-router@3.5.2 vuex@3.6.2
yarn add vue-template-compiler@2.7.14 -D

yarn add vite-plugin-vue2 -D

4.修改相关文件

  • 在根目录创建vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'

export default {
  plugins: [createVuePlugin()],
  server: {
    port: 5164,
    open: true
  }
}
  • 创建src目录,将main.js文件移入src中

  • 修改index.html内容


    index.html
  • 将main.js默认内容全部删除,改为如下

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

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

5.运行项目

yarn run dev

相关文章

网友评论

      本文标题:vite+vue2+js+vuex项目搭建

      本文链接:https://www.haomeiwen.com/subject/nzmcydtx.html