HbuilderX配置vue

您所在的位置：网站首页 › hbuilderx新建项目 › HbuilderX配置vue

HbuilderX配置vue

2023-08-18 10:44| 来源: 网络整理| 查看: 265

vant文档地址：https://youzan.github.io/vant/#/zh-CN/

HbuilderX新建vue项目在这里插入图片描述项目建立后目录结构如下：打开HbuilderX终端，安装如下依赖包：

npm install axios -save-dev // 处理http应用请求的包 npm i vant -S // vant-ui插件 npm i babel-plugin-import -D // 自动按需引入的插件 npm install postcss-pxtorem lib-flexible -D // 自适应插件 npm install --save fastclick vue-router // 解决移动端30ms延迟

新建如下目录和文件在这里插入图片描述在src/router/index.js文件添加：

import Vue from 'vue' import Router from 'vue-router' import Home from '@/pages/home/Home' Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'Home', component: Home, } ] })

修改babel.config.js文件

module.exports = { presets: [ '@vue/app' ], "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ] }

修改src/main.js文件

import Vue from 'vue' import App from './App.vue' import router from './router' import "lib-flexible/flexible" // 自适配 import FastClick from 'fastclick' // 移动端30ms延迟 import { Button } from 'vant' Vue.use(Button) import axios from 'axios' Vue.prototype.axios = axios; Vue.config.productionTip = false FastClick.attach(document.body); new Vue({ router, render: h => h(App), }).$mount('#app')

修改postcss.config.js文件

module.exports = { plugins: { autoprefixer: { browsers: ['Android >= 4.0', 'iOS >= 8'] }, 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'] } } }

将vue.config.js文件拷贝至项目根目录

运行

npm run serve

显示如下页面在这里插入图片描述

【本文地址】

HbuilderX配置vue

HbuilderX配置vue

今日新闻

推荐新闻