Vue-cli(Vue脚手架)安装配置步骤

关于Vue-cli的安装搭建

在上面几篇我记录了webpack的安装配置步骤，有些繁琐和麻烦。vue-cli这个构建工具大大降低了webpack的使用难度，vue-cli可以便捷的搭建了一个项目环境，只关注开发就OK。大大的方便了项目的环境搭建。

用于快速生成Vue项目基础构架

安装3.x版本的Vue脚手架（3.x可创建3.x和2.x的项目）

cmd->运行vue install -g @vue/cli

---

Vue-cli的安装搭建大致有三种方式

• 基于交互式命令行的方式（cmd），搭建新版vue项目。基于交互式命令行的方式（cmd）
• 基于图形化界面的方式，搭建新版vue项目。基于图形化界面的方式创建Vue-cli项目
• 基于2.x的旧模板，创建旧版vue项目。基于2.x的旧模板创建vue旧版项目

---

自定义配置

1. 通过package.json配置项目

在package.json文件中最后一项后面新增

},
  "vue":{
    "devServer":{
      "port":8088,     //打开端口
      "open":true     //自动打开
    }

不推荐这种配置方式，应为webpack.json主要用来管理包配置管理信息，为了方便维护，推荐将vue脚手架相关配置单独定义到VUE.config.js配置文件中。

---

2. 在根目录中创建vue.config.js，在该文件中进行相关配置，从而覆盖默认配置。

module.pxports={
	devServer:{
		port:8088,
		open:true
	}
}