美林 new

软件架构

vue2 + vite + Vue Router + Pinia + axios + ESLint + Prettier + Vant(Vue 2 版本) + Sass + vconsole

安装教程

1. 根据 vue 官方提供安装https://github.com/vuejs/create-vue

npm create vue@legacy

1.这里选装了 vue-router、pinia

2. 进入项目安装依赖

  cd vue-project
  npm install

3. 启动项目

npm run dev

4. 项目打包

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

3. 在 main.js 中引用

import 'amfe-flexible';

4. 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

1. 通过 npm 安装

npm i vant@latest-v2 -S

2. 导入所有组件

   Tips: 配置按需引入后，将不允许直接导入所有组件。在 main.js 下引入

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

二、安装 axios：

1. 通过 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

1. To check syntax and find problems
2. JavaScript modules (import/export)
3. Vue.js // 选vue因为此项目是vue项目
4. Does your project use TypeScript? · No //因项目内没有用到Ts
5. Where does your code run? · browser, node // 按a 全选 回车
6. What format do you want your config file to be in? · 选 JavaScript
7. Would you like to install them now? · 选 Yes
8. Which package manager do you want to use? · 选npm 项目是npm构建的

五、格式化代码

vsCode 设置键盘快捷方式 搜索 格式化 shift + alt + f 选择 Prettier