Vue脚手架（包含Vue3项目创建、vue.config.js配置）

---

• 本人最近在找工作，有推荐的小伙伴私我，不胜感激。

一、介绍

• Vue脚手架（Vue CLI）是一个Vue官方提供的命令行工具，用于快速搭建和管理Vue.js项目的开发环境
  它提供了一套可配置的脚手架，帮助开发者初始化Vue项目，并集成了开发所需的工具和依赖项，包括构建工具、开发服务器、打包工具等，babel、webpack都集成在其中

二、安装

• vue-cli 4.x 需要Node.js >= v8.9，推荐 > v10

npm install -g @vue/cli

# 查看vue-cli的版本
vue -V

三、创建项目

# 1、定义项目名称
vue create 项目名称

# 2、选择vue版本
? Please pick a preset:
  Default ([Vue 2] babel, eslint)           //默认的vue2版本，仅提供babel、eslint
  Default (Vue 3) ([Vue 3] babel, eslint)   //默认的vue3版本，仅提供babel、eslint
> Manually select features                  //手动选择功能 >>> 选择该项

# 3、选择项目所需要的功能，按空格选择，按a切换全部，按i反转选择
>(*) Choose Vue version                 //vue版本选择 >>> 选择该项
 (*) Babel                              //处理ES6、ES7的新语法 >>> 选择该项
 ( ) TypeScript                         //支持使用TypeScript，若使用TS语法则选择
 (*) Progressive Web App (PWA) Support  //渐进式WEB应用支持 >>> 选择该项
 (*) Router                             //路由 >>> 选择该项
 (*) Vuex                               //状态管理 >>> 选择该项
 (*) CSS Pre-processors                 //支持css预编译，初始的css将使用该风格的代码 >>> 选择该项
 (*) Linter / Formatter                 //支持代码风格检查和格式化 >>> 选择该项
 ( ) Unit Testing                       //支持单元测试
 ( ) E2E Testing                        //支持E2E测试，属于黑盒测试，通过编写测试用例，自动化模拟用户操作，确保组件间通信正常
 
# 4、选择Vue.js版本
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
  2.x
> 3.x    >>> 选择该项
 
# 5、是否使用Class风格装饰器？
? Use class-style component syntax? (y/N)
 >>> 输入y
  
# 6、使用Babel与TypeScript一起用于自动检测的填充
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
 >>> 输入y
 
# 7、路由使用history模式？
Use history mode for router?(Requires proper server setup for index fallback in production) (Y/n)
 >>> 输入y
 
# 8、选择CSS预编译器（默认支持PostCSS、Autoprefixer和CSS模块）
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
 >>> 选择Stylus
 
# 9、代码风格检查和格式化配置
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only     //只进行报错提醒 >>> 选择该项
  ESLint + Airbnb config                //不严谨模式
  ESLint + Standard config              //标准模式
  ESLint + Prettier                     //严格模式
  TSLint (deprecated)
  
# 10、语法检查方式
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save               //保存时检查 >>> 选择该项
 ( ) Lint and fix on commit     //代码fix和提交时检查

# 11、将Babel、ESLint等的配置放在哪里
? Where do you prefer placing config for Babel, ESLint, etc.?
> In dedicated config files         //生成专门的配置文件.browserslistrc、.eslintrc.js >>> 选择该项
  In package.json                   //将配置放在package.json中

# 12、是否将本次配置保存为未来的默认配置
? Save this as a preset for future projects? (y/N)

四、配置

1、vue.config.js

• vue-cli创建的时候可能不会创建vue.config.js，它是一个可选的配置文件，如果你需要修改默认的webpack，则可以手动在根目录下创建
• vue官网配置介绍：https://cli.vuejs.org/zh/config/
• 2种配置语法

  //1、
  module.exports = {
    // 选项...
  }
  
  //2、使用 @vue/cli-service 提供的 defineConfig 帮手函数，以获得更好的类型提示
  const { defineConfig } = require('@vue/cli-service')
  module.exports = defineConfig({
    // 选项...
  })
  

const { defineConfig } = require('@vue/cli-service')
//path模块是nodejs提供的用来处理路径的模块
const path = require('path')

//网页标题
const title = process.env.VUE_APP_TITLE || '项目名称'
/**
 *  path.join()：可以把多个路径片段拼接为完整的路径字符串
 *  __dirname：当前文件（vue.config.js）所处的目录
 *
 * @param dir
 */
const resolve = dir => path.join(__dirname, dir)


module.exports = defineConfig({
    //部署应用包时的基本 URL。默认'/'
    publicPath: '/',
    // 指定项目打包输出的路径（相对于项目根目录)。默认'dist'
    outputDir: 'dist',
    // 指定打包生成的静态资源 (js、css、img、fonts) 的路径，相对于outputDir。默认''
    assetsDir: 'static',
    //指定打包时生成的index.html的输出路径，相对于outputDir目录下。默认'index.html'
    indexPath: 'index.html',
    //默认情况下，生成的静态资源在它们的文件名中包含了hash以便更好的控制缓存。默认true
    //filenameHashing: true,
    //当lintOnSave是一个truthy的值时，eslint-loader在开发和生产构建下都会被启用，如果你想要在生产构建时禁用 eslint-loader，你可以用如下配置
    lintOnSave: process.env.NODE_ENV !== 'production',
    //false：babel-loader 会忽略所有 node_modules 中的文件；true：启用，以避免构建后的代码中出现未转译的第三方依赖。默认false
    //你可以只转译部分特定的依赖：给本选项传一个数组，列出需要转译的第三方包包名或正则表达式即可
    //transpileDependencies: false,
    //如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。默认true
    productionSourceMap: false,
    devServer:{
        // 指定服务器监听的IP地址，'localhost'-只能本本机访问；'0.0.0.0'-本机、局域网都能访问
        host: 'localhost',
        port: '8080',
        //服务器启动后是否自动打开默认的浏览器。默认false
        open: false,
        //全局的是否https访问。默认false
        //https: false,
        //如果你的前端应用和后端API服务器没有运行在同一个主机上，你需要在开发环境下将API请求代理到API服务器。前端发起的请求都会走该代理，如：window.location.href、原生的form的submit、axios、ajax
        proxy:{
            //创建一个虚拟服务器
            //拦截以'/api'开头的请求url，代理到此服务下
            '/api': {
                //后端API服务器地址
                target: 'http://localhost:9999',
                //此服务器是否https访问。默认false-http
                //secure: false,
                //是否代理websockets
                //ws: true,
                //是否开启跨域
                changeOrigin: true,
                /**
                 * 路径重写，是一个正则表达式，用于替换'/api'
                 * 将匹配到的'/api'替换成空串
                 *  例如：'/api/user/list'
                 *      不重写路径：'http://localhost:9999'+'/api'+'/user/list'
                 *      重写路径：'http://localhost:9999'+''+'/user/list'
                 */
                pathRewrite: { '^/api': '' }
            }
        },
        disableHostCheck: true
    },
    // webpack配置
    configureWebpack: {
        // 网页标题
        name: title,
        resolve: {
            // 文件系统路径的别名
            alias: {
                //@ = 当前文件（vue.config.js）所处的目录/ + 'src'，绝对路径引入时：@/views/Home.vue，本质是src/views/Home.vue
                '@': resolve('src')
            }
        }
    }
})

五、项目结构

├── node_modules        // 存放包管理工具下载的包
├── public              // 最后编译项目时候的页面模板，该文件夹下的文件不会被编译
│   ├── favicon.ico         // 页签图标
│   └── index.html          // 整个项目的入口页面，也是唯一页面（单页面应用）
├── src                 // 包含整个项目中所有需要包含的代码
│   ├── assets              // 存放静态资源：css、图片
│   │── component           // 存放组件
│   │── router
|   |    └──index.js            // 配置路由
│   │── views               // 存放项目中的页面
│   │── App.vue             // 汇总所有组件，程序入口vue组件
│   │── main.js             // 相当于Java中的main方法，整个项目入口的js文件，一般在这里引入全局通用的js、css，如：element-ui、axios
├── .browserslistrc     // 指定项目所兼容的浏览范围的配置文件
├── .eslintrc.js        // eslint配置文件，检查代码的合法性
├── .eslintignore       // eslint配置文件，配置忽略语法检查的文件
├── babel.config.js     // babel的配置文件，ES语法转换的作用，比如浏览器不支持ES6的语法，该文件就可以把ES6的语法转译为ES5的语法，浏览器就可以识别了
├── package.json        // 里面包含项目描述信息、包的版本、启动/打包命令（scripts节点）
├── package-lock.json   // 安装依赖包时产生的文件，记录包与包之间的依赖关系，锁定包的版本，记录项目所依赖包的树状结构和包的下载地址，加快重新安装的下载速度
├── vue.config.js       // 项目的配置文件

六、使用

# 安装
num install

# 启动
npm run serve

# 打包
npm run build