| 使用Vite安装并初始化Vue2 + pinia + vue | 您所在的位置：网站首页 › 下载安装vuejs › 使用Vite安装并初始化Vue2 + pinia + vue |
使用Vite安装并初始化Vue2 + pinia + vue
|
使用vite创建项目
使用 npm create vite 命令先创建项目，选择框架时选择 Vanilla。 这里不选择vue是因为vite的vue默认版本位vue3 。 为避免重复卸载包，所以选择vanilla vite给出的选项对应如下： vanillavuereactpreactlitsveltevite cli的选择 vite给出了接下来操作的提示，需要npm install 安装所有的依赖包，这些包都包含在package.json中，执行npm install 会读取其中的信息，自己使用npm install 也会将对应信息加入到package.json文件中。 本项目会用到vue2、pinia、vue-router三个包，首先安装vue2的包 npm install vue@2 -D 这里-D的意思是写入 package.json 文件中的 “devDependencies” 关键字下，package.json有"devDependencies"和"dependencies" 关键字，两者的区别是在生产环境下只下载安装 “dependencies” 内的包，开发环境下两个关键字中的包都会安装。（不加-D 就会安装到 “dependencies” 中) 这里我将vue2安装到了"devDependencies"中，是希望在生产环境下可以通过cdn的方法减少项目加载时间，但这点安装到哪里都无所谓。 //此时package.json的配置 { "name": "vue2pinia", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "devDependencies": { "vite": "^4.0.0", "vue": "^2.7.14" } }其次安装pinia，pinia作为状态管理工具，对vue的版本没那么敏感，直接安装最新版 npm install pinia 然后安装vue-router，vue-router4.0后的版本只适合vue3，对于vue2的项目只能使用vue-router3.0及以前的版本 npm install vue-router@3 对于本项目 我还想使用less作为css的预处理语言，所以还需要安装less预处理器 npm install less -D 此时package.json文件如下所示 { "name": "vue2pinia", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "devDependencies": { "vite": "^4.0.0", "vue": "^2.7.14", "less": "^4.1.3" }, "dependencies": { "pinia": "^2.0.29", "vue-router": "^3.6.5" } }我们开始渐进式的开始初始化整个项目 使用vue2我们开始创建src文件夹，初始化main.js， App.vue 这些文件： //main.js import Vue from 'vue' var vm = new Vue({ el:'#app', }) //App.vue 你好 Vite! count is {{counter}} 点击Vite图标了解更多 export default { data: { counter: 0 } } .logo { height: 6em; padding: 1.5em; will-change: filter; .vanilla:hover { filter: drop-shadow(0 0 2em #f7df1eaa); } &:hover { filter: drop-shadow(0 0 2em #646cffaa); } } .card { padding: 2em; .read-the-docs { color: #888; } button { border-radius: 8px; border: 1px solid transparent; padding: 0.6em 1.2em; font-size: 1em; font-weight: 500; font-family: inherit; background-color: #1a1a1a; cursor: pointer; transition: border-color 0.25s; &:hover { border-color: #646cff; } &:focus, button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } } }在终端输入npm run dev之后 不出意外的报错了，此时的vite并不知道要开始编译vue的文件了，我们需要在根目录下创建vite.config.js文件配置vite。 在此之前先安装vite对vue2的支持 npm install vite-plugin-vue2 -D 虽然这个包明面上不支持 2.7以上的版本，但实际上使用官方推荐的 @vitejs/plugin-vue2 一直报错，但也有可能是我不太了解的原因。 安装完成后配置vite.config.js import { defineConfig } from 'vite' import { createVuePlugin } from "vite-plugin-vue2"; export default defineConfig({ plugins: [createVuePlugin()], })之后就可以运行了。现子贴上完整的package.json的代码 { "name": "vue2pinia", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "devDependencies": { "less": "^4.1.3", "vite": "^4.0.0", "vite-plugin-vue2": "^2.0.3", "vue": "^2.7.14" }, "dependencies": { "pinia": "^2.0.29", "vue-router": "^3.6.5" } } 应用pinia实验中。。。 应用vue-router实验中。。。 |
【本文地址】