vue 使用cli脚手架手动创建项目相关的选择配置及真正项目的开始

tcz1018 2020-05-26 原文

转载https://www.jianshu.com/p/635bd3ab7383

根据上述连接将基本的环境和命令和装好

使用命令行 vue create 项目名称出现选项选择手动（没有截图展示）然后出现选择安装东西
可以选择进行自动安装和手动安装我用的自动安装有的东西没有装上所以进手动安装
下面是步骤
注意上下箭头切换空格选中或者取消下面解释下
1.create vue 项目名称
在这里插入图片描述
安装选择配置
其余具体含义看下图

下一步

再下一步

ESLint 严格开发在使用的是时候一般不要关闭虽然有的时候报错但是也确实是自己写的不规范导致的
必要的时候可以进行注释操作标注不报错

保存数据
在这里插入图片描述
后边的根据自己要求自己回车就行

相关文件的说明
在这里插入图片描述
vue.config.js配置

const webpack = require('webpack')
module.exports = {
    //部署应用包时的基本 URL
    publicPath: process.env.NODE_ENV === 'production' ? '/online/' : './',
    //当运行 vue-cli-service build 时生成的生产环境构建文件的目录
    outputDir: 'dist',
    //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
    assetsDir: 'assets',
    // eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效
    lintOnSave: true,
    //是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
    runtimeCompiler: true,
    // 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾  
    productionSourceMap: true,
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
        } else {
            // 为开发环境修改配置...
        }
    },
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {},
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
    },
    // webpack-dev-server 相关配置
    devServer: { // 设置代理
        hot: true, //热加载
        host: '0.0.0.0', //ip地址
        port: 8085, //端口
        https: false, //false关闭https，true为开启
        open: true, //自动打开浏览器
        proxy: {
            '/api': { //本地 
                target: 'xxx',
                // 如果要代理 websockets
                ws: true,
                changeOrigin: true
            },
            '/test': { //测试
                target: 'xxx'
            },
            '/pre': { //预发布
                target: 'xxx'
            },
            '/pro': { //正式
                target: 'xxx'
            }
        }
    },
    pluginOptions: { // 第三方插件配置
        // ...
    }
}