一、创建应用
注意：npm的版本号不同，使用的命令行不同
# npm 6.x
npm init vite@latest my-vue-app --template vue
# npm 7+, 需要添加一个额外的“双破折号”:
npm init vite@latest my-vue-app -- --template vue
二、启动应用
npm run dev
三、Vue Router安装
npm install vue-router@4
更改main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入vue-router
const app = createApp(App) // createApp(App)赋值给app常量，便于后续使用
app.use(router).mount('#app')
src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
// 下面这样写，会报错！！
// const home = () => import('../pages/groupbuying/home')
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
name: 'home',
component: () => import('../pages/groupbuying/home.vue')
}
]
})
export default router
四、Vuex安装
npm install vuex@next --save
src/store/index.js
import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from '../App.vue'
const app = createApp(App)
const state = {}
const mutations = {}
const actions = {}
const store = createStore({
state,
mutations,
actions
})
export default app.use(store)
main.js
import store from './store/index'
五、Scss安装
npm install --save-dev sass-loader
npm install --save-dev node-sass
npm install --save-dev sass
修改vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig ({
plugins: [vue()],
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "/public/css/common.scss";` // scss文件路径
}
}
}
})
页面中使用与以前没有区别
<style lang="scss"></style> // 以App.vue页面为例
六、vant安装
npm i vant@next -S // 安装
npm i vite-plugin-style-import -D // 安装按需引入插件
修改vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import';
// https://vitejs.dev/config/
export default defineConfig ({
plugins: [
vue(),
styleImport({
libs: [
{
libraryName: 'vant',
esModule: true,
resolveStyle: (name) => `vant/es/${name}/style`,
},
],
}),
]
})
main.js引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { Swipe, SwipeItem } from 'vant'
const app = createApp(App)
app
.use(router)
.use(Swipe)
.use(SwipeItem)
.mount('#app')
七、环境变量与模式
环境目录：
用于加载 .env 文件的目录。
在vite.config.js文件的envDir参数配置。
默认值：'root'
如下图：
.env.development文件需要手动创建，当创建在默认路径下时，envDir属性的值不需要显示声明，下面的截图只是为了更清晰的展示显式声明。
环境配置文件不放在根目录下时，如下配置：
环境变量：
值根据不同的环境（开发环境/测试环境/生产环境等）不同。
Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。
Vite提供的在所有情况下都可以使用的内建变量如下：
- import.meta.env.MODE: {string} 应用运行的模式。
- import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
- import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
- import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。
.env文件
自定义的环境变量在.env文件里配置。为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。
示例如下：
控制台输出一下环境配置相关信息(以开发环境为例)：
模式MODE：
mtest相关在这里，后续补充！
官方文档：
八、打包上线
打包页面空白问题
next.router.vuejs.org/zh/api/#cre…
九、闭坑指南
- 关于 proxy 代理及跨域
本地用 node 起了个 web 服务器，http://localhost:1129
vite 开发服务器运行在 http://localhost:3000
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
return {
plugins: [vue()],
resolve: {
// 别名
alias: {
'@': path.resolve(__dirname, '/src'),
},
// 导入时想要省略的扩展名列表。注意，不 建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持。
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
},
server: {
port: '3000', // 这里修改开发服务器端口，默认是 3000
proxy: {
// 配置参数的格式有好几种，祥见官网
'/api': {
target: 'http://localhost:1129',
}
},
}
}
})
// login.vue
methods: {
doLogin () {
axios.get('/api/login').then().catch()
}
}
浏览器请求的请求网址依旧显示的 3000 端口，但其实实际是把请求转发到 1129 端口下了。
因为我的 node 服务器的代码出问题了，导致一开始一直报 404，所以一直以为是代理没生效。
-
关于页面不更新
- 修改 vite.config.js 文件，开发服务器会自动重启
- 页面代码更新后，浏览器页面没更新，是路由配置的大小写和页面实际名称没匹配！！一定要检查这个！！
- 问卷网娃娃亲爱的们从前
