vue3.0 脚手架配置

最新推荐文章于 2025-07-27 09:42:34 发布

Colese

最新推荐文章于 2025-07-27 09:42:34 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue3.0脚手架 vue-cli

本文链接：https://blog.youkuaiyun.com/weixin_43072453/article/details/88030321

vue 专栏收录该内容

15 篇文章

订阅专栏

版本需求

vue cli 需求node.js版本8或者更高

全局安装

npm install -g @vue/cli
yarn  global add @vue/cli
如果没有安装yarn的需要安装
安装地址；https://yarnpkg.com/lang/zh-hans/docs/install/#windows-stable”

检测安装

在这里插入图片描述

1.vue项目创建

1.0运行

vue create vue-home
// vue-home 为项目文件夹名称

2.0选择默认配置，或者自己配置

第一个是默认配置，第二个是自己配置

在这里插入图片描述
3.0选择配置

Babel  Babel编译需要将es6转换为es5
TypeScript  
Router  vue路由
vuex vue状态管理器
CSS Pre-processors   css预编辑器
 Linter / Formatter    代码检测和格式化
 Unit Testing      单元测试
  E2E Testing   端测试

//以上配置自由选择，如果需要第一个可以直接按数字1

2.项目基本搭建完毕

在这里插入图片描述

3. 配置vue.config.js

vue.config.js需要自己手动配置，以下简单的介绍了一些配置，基本够用

const path = require('path')
const debug = process.env.NODE_ENV !== 'production'

module.exports = {
    baseUrl: '/', // 根域上下文目录
    outputDir: 'dist', // 构建输出目录
    assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
    lintOnSave: false, // 是否开启eslint保存检测，有效值：ture | false | 'error'
    runtimeCompiler: true, // 运行时版本是否需要编译
    transpileDependencies: [], // 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
    productionSourceMap: true, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
    configureWebpack: config => { // webpack配置，值位对象时会合并配置，为方法时会改写配置
        if (debug) { // 开发环境配置
            config.devtool = 'cheap-module-eval-source-map'
        } else { // 生产环境配置
        }
        // Object.assign(config, { // 开发生产共同配置
        //     resolve: {
        //         alias: {
        //             '@': path.resolve(__dirname, './src'),
        //             '@c': path.resolve(__dirname, './src/components'),
        //             'vue$': 'vue/dist/vue.esm.js'
        //         }
        //     }
        // })
    },
    chainWebpack: config => { // webpack链接API，用于生成和修改webapck配置，https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
        if (debug) {
            // 本地开发配置
        } else {
            // 生产开发配置
        }
    },
    parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
    pluginOptions: { // 第三方插件配置
    },
    pwa: { // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    },
    devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: { // 配置跨域
            '/api': {
                target: 'https://localhost:5010/api/',
                ws: true,
                changOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        before: app => { }
    }
}

**注：2.项目基本搭建完毕选择配置说得不是很完整，以下链接文章，说得比较详细《感谢参考》
https://blog.youkuaiyun.com/qq_36407748/article/details/80739787