vue-cli3.0项目搭建，项目结构和配置

这篇文章主要介绍下vue-cli3.0项目搭建，项目结构和配置等整理一下，分享给大家。

一、介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件：

CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）

CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令）

CLI 插件：给Vue 项目提供可选功能的 npm 包 （如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试 等）

二、安装

1、全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它，否则跳过此步：

npm uninstall vue-cli -g //或者 yarn global remove vue-cli

2、Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+，你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本）。

下载安装nodeJs，中文官方下载地址：http://nodejs.cn/download/ 

3、安装@vue/cli（Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli）

cnpm install -g @vue/cli //yarn global add @vue/cli

  vue -V   检查vue版本号

vue -V
@vue/cli 4.5.10

三、使用

1、vue create 搭建新项目

  (1)，新建项目：

*官方提示：如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作，必须通过 winpty vue.cmd create hello-world 启动这个命令

vue create <Project Name> //文件名 不支持驼峰（含大写字母）

具体操作如下：

首先，会提示你选择一个preset（预设）：

① 除最后两个，其他选项都是你此前保存的预设配置（如下图第一个“ my-default”是我之前保存的预设配置，如今便可以直接用了）：