移动端基础模版
软件架构
vue2 + vite + Vue Router + Pinia + axios + ESLint + Prettier + Vant(Vue 2 版本) + Sass + vconsole
安装教程
- 根据 vue 官方提供安装https://github.com/vuejs/create-vue
npm create vue@legacy
1.这里选装了 vue-router、pinia
- 进入项目安装依赖
cd vue-project
npm install
- 启动项目
npm run dev
- 项目打包
npm run build
安装插件
一、vue 项目的移动端适配方案
1 先安装 amfe-flexible + postcss-pxtorem
1 amfe-flexible 是配置可伸缩布局方案，主要是将 1rem 设为 viewWidth/10。
1 postcss-pxtorem 是 postcss 的插件，用于将像素单元生成 rem 单位。
npm install amfe-flexible --save
npm install postcss-pxtorem --save
- 在 main.js 中引用
import 'amfe-flexible';
- postcss.config.js ，在根目录下新建改文件夹（亲测该方法，可用）
module.exports = {
plugins: {
"postcss-pxtorem": {
rootValue: 37.5, // Vant 官方根字体大小是 37.5
propList: ["*"],
selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
},
},
};
一、Vue 2 项目，安装 Vant 2：
https://vant-contrib.gitee.io/vant/v2/#/zh-CN/quickstart#tong-guo-npm-an-zhuang
- 通过 npm 安装
npm i vant@latest-v2 -S
- 导入所有组件
Tips: 配置按需引入后，将不允许直接导入所有组件。在 main.js 下引入
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
二、安装 axios：
- 通过 npm 安装
npm install axios
1.根目录增加 api/index.js 文件夹
2.根目录增加 @/utils/request.js 文件夹
import request from '@/utils/request.js'
三、安装 sass：
npm install --save-dev sass
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass
三、安装 调试工具 vconsole
npm install vconsole
// 在main.js 下引入
import Vconsole from 'vconsole' // 引入 Vconsole
new Vconsole() // 所有环境均使用
四、安装 eslint
npx eslint --init
- To check syntax and find problems
- JavaScript modules (import/export)
- Vue.js // 选 vue 因为此项目是 vue 项目
- Does your project use TypeScript? · No //因项目内没有用到 Ts
- Where does your code run? · browser, node // 按 a 全选 回车
- What format do you want your config file to be in? · 选 JavaScript
- Would you like to install them now? · 选 Yes
- Which package manager do you want to use? · 选 npm 项目是 npm 构建的
五、格式化代码
vsCode 设置键盘快捷方式 搜索 格式化 shift + alt + f 选择 Prettier
