宿迁网站网站建设,专业开发网站公司,宿州网站制作公司,免费的网站域名查询浏览器vue3vant自动导入pinavitejspnpm搭建项目框架 文章目录 vue3vant自动导入pinavitejspnpm搭建项目框架1. 安装pnpm#xff08;如果还没有安装#xff09;#xff1a;2. 创建项目目录并进入该目录#xff1a;3. 初始化项目#xff1a;4. 安装Vite作为构建工具#xff1a;5.…vue3vant自动导入pinavitejspnpm搭建项目框架 文章目录 vue3vant自动导入pinavitejspnpm搭建项目框架1. 安装pnpm如果还没有安装2. 创建项目目录并进入该目录3. 初始化项目4. 安装Vite作为构建工具5. 创建Vite配置文件vite.config.js并添加以下内容6. 在src目录下创建main.js文件添加以下内容7. 创建App.vue文件添加以下内容8. 安装Vue 39. 安装Vant组件库10. 安装Pina状态管理11. 在src目录下创建store.js文件添加以下内容12. 在main.js文件中添加以下内容以使用Pina状态管理13. 安装其他依赖14. gitee 地址:https://gitee.com/Beichenguren/vue3-h5 要搭建一个使用Vue 3、Vant组件库、Pina状态管理、Vite作为构建工具、JavaScript语言、pnpm作为包管理工具的项目框架可以按照以下步骤进行操作 1. 安装pnpm如果还没有安装
npm install -g pnpm2. 创建项目目录并进入该目录
mkdir my-project
cd my-project3. 初始化项目
pnpm init这将生成一个package.json文件。
4. 安装Vite作为构建工具
pnpm add -D vite5. 创建Vite配置文件vite.config.js并添加以下内容
import { defineConfig } from vite
import vue from vitejs/plugin-vue
import { resolve } from path;
import path from path// 自动导入vue中hook reactive ref等
import AutoImport from unplugin-auto-import/vite
//自动导入ui-组件 比如说ant-design-vue element-plus vant等
import Components from unplugin-vue-components/vite;// 注册 Vant 组件
import { VantResolver } from vant/auto-import-resolver;
// https://vitejs.dev/config/
export default defineConfig({base: ./,// 指定输出路径 publicPath: ./,// 指定输出路径build: {outDir: ../发布包/dist,// 指定输出路径cssCodeSplit: true,// 启用 CSS 代码拆分extract: true, // 是否使用css分离插件 ExtractTextPluginminify: terser, // 启用 terser 压缩 sourcemap: false, // 构建后是否生成 source map 文件 terserOptions: {compress: {drop_console: true, // 删除所有 consoledrop_debugger: true, // 删除 debugger }}},resolve: {alias: {: path.resolve(__dirname, src)// 代替src}},plugins: [vue(),AutoImport({//安装两行后你会发现在组件中不用再导入refreactive等imports: [vue, vue-router],// 自动导入vue和vue-router相关函数//存放的位置dts: src/auto-import.d.ts,// 生成位置}),Components({// 引入组件的,包括自定义组件// 存放的位置dts: src/components.d.ts,// 生成位置// 全局注册 Vant 组件库resolvers: [VantResolver()],// 自动导入组件库}),{name: vite-plugin-babel,// 插件名称enforce: pre,// Vite 核心插件之前调用该插件},],server: {// host: 127.0.0.1, // 指定服务器应该监听哪个 IP 地址hot: true,// 保存文件时自动刷新strictPort: false,//通过server.strictPort控制端口冲突时是否自动刷新port: 8080, // 指定开发服务器端口open: true, // 启动时自动在浏览器中打开应用程序proxy: { // 配置自定义代理规则/api: {target: http://jsonplaceholder.typicode.com,// 代理目标地址changeOrigin: true,// 是否需要代理跨域// rewrite: (path) path.replace(/^\/api/, )// 重写路径}},},
})
6. 在src目录下创建main.js文件添加以下内容
import { createApp } from vue
// 1. 引入公共样式
import /styles/style.css
import /styles/common.css
// 2. 引入组件样式
import vant/lib/index.css;
//routes
import router from /router/index;
import Vconsole from vconsole;
import pinia from /store/index
import App from /App.vue
// amfe-flexible会根据当前页面的尺寸去设置根元素的font-size
import amfe-flexible/indexconst app createApp(App)
//routes
app.use(router)
// pinia
app.use(pinia)// Vconsole
if (process.env.NODE_ENV ! production) {const vconsole new Vconsole()window[vconsole] vconsole
}
router.beforeEach((to, _from, next) {/* 路由发生变化修改页面title */if (to.meta.title) {document.title to.meta.title;}next();
});app.mount(#app)7. 创建App.vue文件添加以下内容
templatediv idapprouter-view //div
/templatestyle scoped langless
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-size: 16px;color: #333;
}
/style
8. 安装Vue 3
pnpm add vuenext9. 安装Vant组件库
pnpm add vantnext10. 安装Pina状态管理
pnpm add pinanext11. 在src目录下创建store.js文件添加以下内容
import { createStore } from pina;const store createStore();export default store;12. 在main.js文件中添加以下内容以使用Pina状态管理
import { createApp } from vue;
import App from ./App.vue;
import store from ./store;createApp(App).use(store).mount(#app);13. 安装其他依赖
pnpm install至此你已经搭建好了一个使用Vue 3、Vant组件库、Pina状态管理、Vite作为构建工具、JavaScript语言、pnpm作为包管理工具的项目框架。你可以根据自己的需求继续开发和配置项目。
14. gitee 地址:https://gitee.com/Beichenguren/vue3-h5
