Vue脚手架

Vue脚手架的基本用法

Vue脚手架用于快速生成Vue项目基础架构，官网

使用步骤
1.安装3.x版本的Vue脚手架：

npm install -g @vue/cli

基于3.x版本的脚手架创建vue项目

1. 基于交互式命令行的方式，创建 新版vue项目

   vue create 项目名  
   

   （该方式稍微难以操作，了解即可）

2. 基于图形化界面的方式，创建 新版vue项目

   vue ui
   

   顺序：点击创建–>选择项目创建的路径–>点击在此创建新项目–>输入项目名–>Git中填写初始提交信息–>点击下一步–>选择配置（若选择手动）–>点击下一步–>推荐一定要安装“Babel”、“Router”和选中“Linter/Formatter”、“使用配置文件”–>点击下一步–>第二项选择配置文件选择“ESLint+Standard config”–>点击创建项目（可在弹出框将配置保存为预设）

3. 基于2.x的旧模板，创建 旧版vue项目

   npm install -g @vue/cli-init
   vue init webpack 项目名
   

Vue脚手架生成的项目结构分析

Vue脚手架自定义配置

1. 通过package.json配置项目

//必须是符合规范的json语法
"vue":{
    "devServer":{
        "port":"8888",
        "open":true
    }
}

注意：不推荐使用这种配置方式。因为package.json主要用来管理包的配置信息；为了方便维护，推荐将vue脚手架相关的配置，单独定义到vue.config.js配置文件

2. 通过单独的配置文件配置项目

• 在项目的根目录创建文件vue.config.js

• 在该文件中进行相关配置，从而覆盖默认配置

//vue.config.js
module.exports={
    devServer:{
        port:8888
    }
}