• vuecli3的项目搭建,包含vue.config.js常用配置


    1、卸载旧版本

    npm uninstall vue-cli -g 或者 yarn global remove vue-cli

    2、安装cli3脚手架

    npm install -g @vue/cli 或者 yarn global add @vue/cli

    注意:

    • 要求node版本 >=8.9
    • vue查看版本号------vue -V
    • node查看版本号-----node -v

    3、安装支持运行独立的.vue文件

    需安装 npm install -g @vue/cli-service-gloabal
    运行文件 vue serve <文件名>

    4、新建项目

    vue create <项目名字> //不支持驼峰
    也可使用图形化界面搭建 vue ui

    5、安装插件

    vue add <插件名>

    6、cli常用配置(vue.config.js)

    const path = require('path');
    const resolve = (dir) => path.join(__dirname,dir);
    module.exports = {
        publicPath: './', //打包路径,使用相对路径生成的dist文件夹下的index可以打开
        // 输出文件目录
        outputDir: 'dist',
        //取消生成map文件
        productionSourceMap: false,
        // webpack-dev-server 相关配置
        devServer: {
            open: true,
            host: '0.0.0.0',
            port: 8080,
            https: false,
            hotOnly: false,
            proxy: null, // 设置代理
            before: app => { }
        },
        chainWebpack: config =>{
            config.resolve.alias
                .set('@', resolve('src'))
                .set('common',resolve('src/common'))
                .set('utils', resolve('src/utils'))
        },
        // 第三方插件配置
        pluginOptions: {
            //1) vue-cli3 使用less全局变量
            //需安装vue add style-resources-loader
            'style-resources-loader': {
                preProcessor: 'less',
                patterns: [
                    path.resolve(__dirname,'./src/common/less/index.less'),
                    //这个是加上自己的路径,       
                ]
            }
        }
    }
    
  • 相关阅读:
    The path "" is not valid path to the gcc binary.
    ADB命令介绍
    Android 中Message,MessageQueue,Looper,Handler详解+实例
    Sqlite 修改字段
    曾经光辉岁月 永远海阔天空
    用AchartEngineActivity引擎自定义图表控件和背景折线图
    一个帖子学会Android开发四大组件
    Android获得系统时间(24小时制)
    TagBuilder
    MVC
  • 原文地址:https://www.cnblogs.com/sgs123/p/11466382.html
Copyright © 2020-2023  润新知