使用Vue-CLI搭建Vue项目环境

前言：本文简单介绍如何安装Vue官方提供的脚手架和如何通过Vue脚手架搭建工程化项目，并说明工程化项目的项目架构和启动项目。

Vue-CLI版本：Vue-CLI 4.0

前期准备

需要先安装好Node.js环境和Git环境

安装Node.js环境

安装Git

Vue-cli 简介

Vue-cli是Vue官方提供的一个脚手架，基于 webpack 构建，用于快速生成一个Vue的项目模板（优先定义好的目录结构及基础代码），类似Maven项目中预先创建的模板项目，定义好项目的大致结构方便项目开发。

Vue-cli 官方文档

Vue.js 官方文档

安装Vue-cli

Vue-cli：生成Vue工程模板(脚手架)

cnpm install -g vue-cli 这是vue-cli(2.0以下)的旧安装方法，vue-cli(3.0以上)包名称由 vue-cli 改成了 @vue/cli，需要先卸载旧版本再安装新版本。https://cli.vuejs.org/zh/guide/installation.html

先卸载旧版本

npm uninstall vue-cli -g

安装新版本

cnpm install -g @vue/cli

验证版本

vue --version

创建Vue项目

创建一个Vue项目myapp，在电脑的任意目录新建空文件夹，输入以下命令，根据自己的需要进行选择创建

旧版本创建命令：vue init webpack myapp

新版本创建命令：

vue create myapp	# 命令行形式创建，myapp为项目名(自定义)
# or 图形化界面创建项目
vue ui  # 图形化界面创建(推荐)

创建项目慢，可以将使用淘宝镜像进行加速，编辑 ~/.vuerc文件

将 "useTaobaoRegistry": false改为 "useTaobaoRegistry": true

项目架构

目录结构	说明
build	项目构建(webpack)相关代码
config	配置文件
node_module	依赖模块
src	源码
static	静态资源
test	初始测试
index.html	首页入口文件
package.json	项目配置文件
README.md	项目说明文档

启动项目

cd myapp
npm run serve

打包项目

将项目打包成一个dist文件夹，用于项目部署

npm run build

相关技术

Webpack

Element-UI

Axios