命令行创建uniapp项目

最新推荐文章于 2024-07-18 16:46:57 发布

dralexsanderl

最新推荐文章于 2024-07-18 16:46:57 发布

阅读量1.3k

点赞数 1

分类专栏：微信小程序文章标签： uni-app javascript vue.js

本文链接：https://blog.csdn.net/qq_42880714/article/details/126509087

版权

微信小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章介绍了如何通过命令行使用vue-cli创建uniapp项目，包括安装、创建不同版本的项目模板以及打包优化。在打包过程中，提到了添加--minimize参数和使用terser-webpack-plugin插件来减小代码体积。此外，还讲解了微信小程序项目的打包和miniprogram-ci的集成使用。

摘要由CSDN通过智能技术生成

命令行创建uniapp项目

除了使用HBuilderX工具可视化搭建项目外，DCloud官方还提供了一个脚手架用于命令行搭建项目。

环境安装

全局安装vue-cli

npm i @vue/cli@4 -g

建议使用vue-cli 4.x版本，vue-cli 5.x与webpack存在冲突，会导致运行报错

创建项目

使用vue-cli安装预设模板。

vue create -p dcloudio/uni-preset-vue projectName

dcloud提供了多个预设版本

# 对应HBuilderX最新alpha版
vue create -p dcloudio/uni-preset-vue#alpha projectName

# 使用Vue3/Vite js版本
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

# 使用Vue3/Vite ts版本
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

之后按照提示选择对应的项目模板即可。

打包

比起在hbuilder里直接点击压缩打包而言，package.json默认script里边的打包命令是不带压缩的，可以在对应的打包命令中添加--minimize后缀。
比如：

"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize",

但是对比起hbuilder里打包出来的压缩包而言体积还是偏大，这时候看压缩出来的代码可以发现里边携带了非常多注释，可以在项目根目录中配置vue.config.js文件在打包中删除掉。

文件里携带了非常的注释，导致体积增大：
在这里插入图片描述
使用terser-webpack-plugin插件移除注释跟console

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false,
            },
            // 删除console
            compress: {
              drop_console: true,
              pure_funcs: ['console.log'],
            },
          },
        }),
      ],
    }
  },
};