Vue脚手架

1.Vue脚手架的基本用法

vue脚手架用于快速生成vue项目基础架构

使用步骤：

（1）安装vue脚手架

npm install -g @vue/cli

（2）基于脚手架创建vue项目

交互式命令行创建：

• 项目名（自己取）
• 选择第二个
• 单击空格选中后会标记*，表示要安装这一项
• 
• 创建项目完毕后进入该项目目录，运行命令 npm run serve ,运行项目

图形化界面创建：

• 输入命令 npm ui
• 点击创建，进入项目创建面板
• 点击再此创建新项目
• 填写完项目名称和初始化git仓库信息后点击下一步
• 
• 开启Babel、Router、Linter、使用配置文件，点击下一步
• 按照图示所选，点击创建项目

基于旧模板创建旧版vue项目：

• 首先输入命令 npm i -g @vue/cli-init 
• 输入命令 vue init webpack 项目名 
• 按照图示选择安装
• 项目创建完成后输入命令 npm run dev 运行项目

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

3.Vue脚手架的自定义配置

（1）通过package.json配置项目

注意：不推荐这种配置方式，应该将vue脚手架相关配置单独定义在vue.config.js中，方便后期的维护。

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

• 在项目根目录文件中创建vue.config.js文件
• 在该文件中进行相关配置，可以覆盖默认配置

       

• 配置完后，输入命令 npm run serve 运行项目