vue3+ts+vant 手机端项目搭建

1、查看vue版本

vue -V

若提示'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件。

全局安装vue
npm install -g vue
npm install -g @vue/cli

2、创建项目

vue create 项目名

• 手动选择功能

• 选择项目所需的功能

• 选择Vue的版本

• 是否使用class类风格语法，如可以通过export default class Home extends Vue{}创建vue实例

• 是否使用Babel做转义，与TypeScript一起用于自动检测

• 是否选择路由的history模式

• 选择css预处理语言

• 选择代码格式化检测工具

• 选择Babel、Eslint文件存放位置

• 是否保存当前配置项，便于后续直接根据名称获取到配置

• 最后，等待安装完成就可以了

3、运行项目

cd 项目名
npm run serve

4、安装vant

npm i vant --save--dev

5、配置vant按需引入

 // 安装插件
 npm i unplugin-vue-components -D

 // 配置vue.config.js
 const { VantResolver } = require('unplugin-vue-components/resolvers')
 const ComponentsPlugin = require('unplugin-vue-components/webpack')module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()]
      })
    ]
  }
})

6、配置less全局变量

// 在src文件中新建theme/main.less
@main-color: #e1aa8c; // 主色
@grey-color: #999999; // 灰色
// 配置vue.config.js
module.exports = defineConfig({
  css:{
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            // eslint-disable-next-line quotes 
            hack: `true; @import "@/theme/main.less";`
          }
        }
      }
    }
  }
})

// vue组件中使用
<style scoped lang="less">
  .font-sty {
    color: @main-color
  }
</style>

7、引用postcss-pxtorem插件

 // 安装插件
 npm i postcss-pxtorem amfe-flexible --save--dev

// 设置main.ts
import 'amfe-flexible'

// 根目录下新建文件postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 15,
      propList: ['*']
    }
  }
}

8、配置接口代理proxy

注意：vuecli5废弃了disableHostCheck 需要改为:

historyApiFallback: true,
allowedHosts: 'all'

module.exports = defineConfig({
  devServer: {
    proxy: {
      '/api': {
        target: url, // 后端接口地址
        changeOrigin: true, // 是否允许跨越
        pathRewrite: {
          '^/api': '/api'
        }
      }
    },
    historyApiFallback: true,
    allowedHosts: 'all'
  }
})