使用vue-cli3搭建typescript移动端

安装vuecli3

npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建项目

vue create project-typescript

手动选择特性
使用vue-cli3搭建typescript移动端_第1张图片

选择babel、ts、router、vuex、css预编译器
使用vue-cli3搭建typescript移动端_第2张图片
这里我们使用基于类的组件
使用vue-cli3搭建typescript移动端_第3张图片
选择sass编译器
使用vue-cli3搭建typescript移动端_第4张图片
eslint规则
使用vue-cli3搭建typescript移动端_第5张图片
独立的配置文件
使用vue-cli3搭建typescript移动端_第6张图片

配置

在App.vue中新增路由

<div id="app">
    <router-view>router-view>
 div>

设置Viewport 的适配

安装

npm install autoprefixer postcss-px-to-viewport -D

添加vue.config.js文件

const autoprefixer = require('autoprefixer');
const pxtoviewport = require('postcss-px-to-viewport');
module.exports = {
css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtoviewport({
            viewportWidth: 375,
          }),
        ],
      },
    },
  },
}

设置ts-import-plugin

按需加载组件

const tsImportPluginFactory = require('ts-import-plugin');
module.exports={
chainWebpack: (config) => {
    // ts
    config.module
      .rule('ts')
      .use('ts-loader')
      .tap((options) => {
        Object.assign(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              tsImportPluginFactory({
                libraryName: 'vant',
                libraryDirectory: 'es',
                style: true,
              }),
            ],
          }),
          compilerOptions: {
            module: 'es2015',
          },
        });
        return options;
      });
  },
}

新增api模块

  • 目录
    ├── src//  
    	├── api // 接口文件
    		├── apple // 苹果接口
    		├── index.js // 入口文件
    
  • 入口文件
    const files = require.context('./', true, /\.js$/)
    const apiMap = {}
    files.keys().forEach(key => {
        if (key === './index.js') {
            return
        }
        Object.assign(apiMap, files(key).default?files(key).default:files(key))
    })
    
    export default apiMap
    

小技巧

  • 不需转viewport的设置两遍
.tip{
    font-family: PingFangSC-Regular;
    font-size: 12px;
    font-size: 12px;
    color: #999999;
    margin-bottom: 45px;
    text-align: left;
}

在这里插入图片描述

你可能感兴趣的:(前端,#,Vue-js,个人总结,typescript,vue.js)