vue脚手架

一、概念

1. 简述： 用于快速生成vue项目基础架构，
   渐进式代表的含义是：主张最少, 自底向上, 增量开发, 组件集合, 便于复用
   官网：https://cli.vuejs.org/zh/
2. vue-cli：是vue官方提供的一个全局模块包（带工具命令行），开箱即用，webpack零配置，此包用于创建脚手架工程
3. vue-cli的好处

- 统一的项目结构(文件夹+文件+配置代码)
- 开发过程中的webpack各系列支持
  - babel支持
  - eslint约束语法风格（代码风格）
  - 样式预处理器less 
  - vue单文件支持
- 提供一个开发时服务器，打包并预览项目代码
  - 热更新 (实时打包变化代码)
  - 本地服务器环境
- 基于nodejs的命令行工具

二、vue-cli全局安装

方法一：npm install -g @vue/cli
方法二：yarn global add @vue/cli

查看脚手架版本：vue -V

三、vue-cli创建项目启动服务

①. 全局安装命令

yarn global add @vue/cli   

②. 创建项目：项目名不能带大写字母, 中文和特殊符号

vue create vuecli-demo

③. cd my-project 切换目录
④. 运行

yarn serve  

⑤. 根目录创建vue.config.js 自定义服务端口配置

/* 覆盖webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true,
    port: 3000
  },
  lintOnSave: false // 关闭eslint检查
}

四、生成文件目录