小白如何从零搭建一个完整的vue3的项目

迷路的小白
987 阅读5分钟

前段时间入职了一家新的公司，我需要负责一个crm的移动端的系统。这时，面临一个问题，就是技术选型。俺呢是主栈是vue，其次呢是anjular。因为负责移动端，所以我就选择了vue3+tsx+vant，第一呢是有新框架那必须试试呀，第二就是考虑到以后的发展趋势和移动端的轻便吧（vant），顺便提一句，如果非必要，ts可引可不引，太难受了。。。

以下就是正文，主要记录分享下我的一个过程吧，后续随着项目的更新和优化，我也会去进行更新：

一、脚手架的搭建

这一步，我最开始的时候是想着去先引入主框架，后续的像vuex（后续替换掉了），ts之类的后续用到的时候再进行引入，但是这样会后面弄的框架有些混乱，所以我后面进行了一个重置，一次性将这些东西进行了下引入。（因为我是多入口的项目，所以有着多个路由文件在对应的每个项目中）

image-20220503170231369.png

二、格式的统一

搭建完脚手架第一步，就是去配置格式化的工具，因为每个人的编码习惯都不一样，编码是需要多人配合的，格式的统一前期可能效果甚微，后期真的会有很大的帮助，乱糟糟的代码真的会让人看的头疼（血淋淋的教训呀）

我用的是eslint+prettierrc（这些配置的东西全凭个人喜好，因为只有俺自己，那就先按照俺自己的喜好了）

.prettierrc
{
    "printWidth": 140,
    "singleQuote": true,
    "semi": true,
    "trailingComma": "all",
    "proseWrap": "never",
    "tabWidth": 4
}

.eslintrc.js
module.exports = {
    root: true,
    env: {
      node: true
    },
    'extends': [
      'plugin:vue/essential',
      // '@vue/standard',
      '@vue/typescript/recommended'
    ],
    parserOptions: {
      ecmaVersion: 2020
    },
    rules: {
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      "@typescript-eslint/explicit-module-boundary-types": "off"
    },
    overrides: [
      {
        files: [
          '**/__tests__/*.{j,t}s?(x)',
          '**/tests/unit/**/*.spec.{j,t}s?(x)',
          "*.ts",
          "*.tsx"
        ],
        rules: {
          "@typescript-eslint/explicit-module-boundary-types": ["error"]
        },
        env: {
          mocha: true
        }
      }
    ]
}

三、ts的配置

我这儿几乎没咋配置ts，就是脚手架的ts自己配置，可能进行了极少的修改（一样根据自己配置）

tsconfig.json
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noImplicitAny": false,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ],
      "@u": [
        "src/template/user/*"
      ],
      "@e": [
        "src/template/engineer/*"
      ],
      "_assets": [
        "src/assets/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
  ],
  "exclude": [
    "node_modules"
  ]
}

四、git的配置

主要是配置一些git提交时的忽略文件啥的

.gitignore
.DS_Store
node_modules
/dist
/dist.zip
/tests/e2e/videos/
/tests/e2e/screenshots/

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

五、webpack的配置

vue的webpack的配置有自己的配置文件（我这边因为是多入口，所以配置了下多入口，一些地址类的被我删了，大家可以查阅下配置）

vue.config.js
module.exports = {
  // publicPath: '/',
  // assetsDir: '/',
  // outputDir: './dist',
  productionSourceMap: false,   // 不需要生产环境的source map，将其设置为false加速生产环境的构建
  // lintOnSave: true, // 是否开始eslint校验的控制台打印错误信息
  devServer: {
    // disableHostCheck: true,
    // host: 'localhost', 
    // port: '8080',  //设置的端口
    open: true,  //true为表明我们运行命令行,页面会自动打开 npm run server 的时候页面自己打开
    // hot: true,
    proxy: proxyObj
  },
  // 配置css
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    // extract: true,
    sourceMap: true,
    // css预设器配置项
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            // rootValue: 100,
            exclude: /(node_module)/,
            remUnit: 100
          })
        ]
      }
    },
    // 启用 CSS modules for all css / pre-processor files.
    //modules: false
    requireModuleExtension: true
  },
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@u', resolve('src/template/))
      .set('@e', resolve('src/template/'))
      .set('_assets', resolve('src/assets')); // 路径别名
    // fs.remove('./dist' + '/' + '/'); // 打包文件路径，每次打包之前删除旧的文件
  },
  // 真正启动的项目对应的入口文件
  pages: {
    项目一: {
      buildVersion: new Date().valueOf(),
      entry: '',
      template: '',
      filename: '',
      title: '',
      chunks: []
    },
    项目二: {
      buildVersion: new Date().valueOf(),
      entry: '',
      template: '',
      filename: '',
      title: '',
      chunks: []
    }
  },
  transpileDependencies: [
    'vuex-module-decorators'
  ],
  //  pluginOptions: {
  //   'style-resources-loader': {
  //     preProcessor: undefined,
  //     patterns: ['地址']
  //   }
  // },
  // configureWebpack: {
  //   optimization: {
  //     minimizer: [
  //       new UglifyJsPlugin({
  //         uglifyOptions: {
  //           // 删除注释
  //           output: {
  //             comments: false
  //           },
  //           // 删除console debugger 删除警告
  //           compress: {
  //             warnings: false,
  //             drop_console: true,//console
  //             drop_debugger: false,
  //             pure_funcs: ['console.log']//移除console
  //           }
  //         }
  //       })
  //     ]
  //   }
  // }
}

六、ui框架和插件的配置

1、vant引入，我这边是进行的部分引入，这个官网上可以参考youzan.github.io/vant/#/zh-C…

2、因为我是移动端的项目，所以引入了一个插件，postcss-px2rem，感兴趣的可以去查看下文档，主要是用来px和rem的转换的，可以自动的将px转换成适配手机的rem。

七、gitlab的自动化部署

这个因人而异，自动化部署我感觉是方便些，不用每次还得手动去部署，这个就不展开详细说了

八、其他工具

这个就是自己编码的一些习惯了：

1、vscode编辑器去进行编码

2、source tree去进行代码的提交合并

3、yarn工具去进行安装

4、n包管理工具

5、vscode的一些插件等等

通过以上的这些，一个完整的基本架构就完成了，我自己的个人体会就是，一定要去自己尝试搭建下，你会发现很多的问题，其次就是不要害怕自己搭建的不好或者出问题，任何的问题都能解决，不好后续也都能优化，干就完事儿了，后续我会更新vue3+tsx的语法，生命周期，一些钩子属性，公共组件开发，公共的插件开发，低代码平台，pinia替换vuex，对接公众号，打卡定位等。。欢迎大家讨论，一个人vue3属实太慢了，而且本人也经验少。

avatar
文章
阅读
粉丝