Vue脚手架主流版本介绍

参考文档: https://www.cnblogs.com/wisewrong/p/9740173.html
一、安装 @vue/cli  脚手架
    npm install -g @vue/cli
    安装完成后，可以使用 vue -V （这个 V 是大写的）查看版本号
    注意:@vue/cli 依赖于webpack,在使用之前,先安装webpack   
    npm install webpack -g 
二、创建项目
    vue create project-name
    这里的 project-name 是自定义的项目名称，命令执行之后，会生成对应文件夹
三,  项目生成之后，已经自动安装了相关的依赖项，这时候可以直接启动项目：
    npm run serve

----------------------

四,  完成以上步骤之后，就已经可以开发 vue 项目了，但无法满足定制化的开发需求
    这时候就需要在根目录手动创建一个 vue.config.js
    // vue.config.js
    module.exports = {
          publicPath:'/',    // 启动页地址
          outputDir: 'dist', // 打包的目录
         lintOnSave: true, // 在保存时校验格式
          productionSourceMap: false, // 生产环境是否生成 SourceMap
          devServer: {
                open: true, // 启动服务后是否打开浏览器
                host: '0.0.0.0',
                port: 8080, // 服务端口
                https: false,
                hotOnly: false,
                proxy: null, // 设置代理
                before: app => {}
          },
    }

    以上是vue/cli 3.x/4.x的写法, 手动创建vue.config.js
    在vue/cli5.x之后, 项目搭建时,vue.config.js会自动创建, 结构如下

    const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
        transpileDependencies: true,
        publicPath: '/',    // 启动页地址
        outputDir: 'dist', // 打包的目录
        lintOnSave: true, // 在保存时校验格式
        productionSourceMap: false, // 生产环境是否生成 SourceMap
        devServer: {
            open: true, // 自动打开浏览器访问主页
            host: 'localhost',  // 主页地址
            port: 8080,    // 端口号
            proxy: null, // 设置代理
        }
    })

五 ,当项目完成时,如何打包发布?
(1)打包:项目开发完成之后,代码行执行命令
    npm run build 
 编译并重新构建项目,然后在项目目录下生成一个 dist 文件夹
(2)发布: 只需要将dist文件夹中的所有内容复制到服务器(IIS / node / apache)的静态文件夹中即可