VueCLI3项目构建基础
# VueCLI3项目构建基础
Vue.js 作为一门轻量级、易上手的前端框架，从入门难度和学习曲线上相对其他框架来说算是占据优势的，越来越多的人开始投入 Vue.js 的怀抱，走进 Vue.js 的世界。
# 依赖工具
# 查看 node 版本
node -v
# 查看 npm 版本
npm -v
1
2
3
4
5
6
2
3
4
5
6
# 脚手架
- 什么是脚手架
很多人可能经常会听到“脚手架”三个字，无论是前端还是后台，其实它在生活中的含义是为了保证各施工过程顺利进行而搭设的工作平台。因此作为一个工作平台，前端的脚手架可以理解为能够帮助我们快速构建前端项目的一个工具或平台。
- vue-cli
其实说到脚手架，目前很多主流的前端框架都提供了各自官方的脚手架工具，以帮助开发者快速构建起自己的项目，比如 Vue、React 等，这里我们就来介绍下 Vue 的脚手架工具 vue-cli。
我们可以在终端通过以下命令全局安装 vue-cli：
# 安装 Vue CLI 3.x
npm i -g @vue/cli
1
2
2
如果你习惯使用 yarn，你也可以：
# 没有全局安装yarn需执行此命令
npm i -g yarn
yarn global add @vue/cli
1
2
3
2
3
注意因为是全局安装，所以 vue-cli 是全局的包，它和我们所处的项目没有关系。同时我们这里介绍的 CLI 版本是最新的 3.x，它和 2.x 版本存在着很大的区别
安装完 vue-cli 后，我们在你想要创建的项目目录地址下执行构建命令：
# my-project 是你的项目名称
vue create my-project
1
2
2
如果你只想构建一个基础的 Vue 项目，那么使用 Babel、Router、Vuex、CSS Pre-processors 就足够了，最后选择你喜欢的包管理工具 npm or yarn。
启动
等待构建完成后你便可以运行命令来启动你的 Vue 项目：
# 打开项目目录
cd vue-project
# 启动项目
yarn serve
# or
npm run serve
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
需要注意的是如果启动的时候出现报错或者包丢失等情况，最好将 node 或者 yarn （如果使用）的版本更新到最新重新构建。
目录结构
├── node_modules # 项目依赖包目录
├── public
│ ├── favicon.ico # ico图标
│ └── index.html # 首页模板
├── src
│ ├── assets # 样式图片目录
│ ├── components # 组件目录
│ ├── views # 页面目录
│ ├── App.vue # 父组件
│ ├── main.js # 入口文件
│ ├── router.js # 路由配置文件
│ └── store.js # vuex状态管理文件
├── .gitignore # git忽略文件
├── .postcssrc.js # postcss配置文件
├── babel.config.js # babel配置文件
├── package.json # 包管理文件
└── yarn.lock # yarn依赖信息文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
可视化界面
vue ui
1