vue 脚手架

vue 脚手架

什么是脚手架 ？

所谓脚手架，就是可以帮助我们快速的搭建一个项目。项目里面的目录等全部都是按照一定规则创建好了的，开发者只需要专注于业务逻辑。

现在，前端的三大框架（angular、react、vue）都提供了对应的脚手架工具。

• angular：angular-cli
• react：create-react-app
• vue：vue-cli

使用脚手架来搭建项目

首先，第一步，我们需要全局安装 vue-cli 脚手架工具。命令如下：

npm install @vue/cli -g

注：如果之前安装了 vue-cli 2.x 版本的同学，需要先卸载。卸载命令：

npm uninstall vue-cli -g

安装好之后，使用 vue -V 来查看脚手架工具的版本。

例如：

Jie-Xie:~ Jie$ vue -V
@vue/cli 4.4.6

脚手架安装完毕后，我们就可以使用脚手架工具来创建我们的项目。

创建项目的命令如下（首先，你需要 cd 到你要放置项目的目录）

vue create 项目名

项目创建完成后，目录如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GPDJliAS-1595228289420)(/Users/Jie/Library/Application Support/typora-user-images/image-20200716133903088.png)]

• .gitignore：记录哪些文件不需要提交到仓库。比如 node_modules
• babel.config.js：babel 文件的配置。
• node_modules：依赖包
• package.json：记录 vue-cli 的版本号，各项依赖包的版本号之类的，各种配置信息等。
• package-lock.json：将各项依赖项目的版本号锁定。
• public：里面放置了单页应用的入口 html 文件
• README.md：关于这个项目的说明。里面一般包含这个项目是什么，如何使用，如何跑起来。
• src：来源于英语单词 source，我们的代码就放在 src 目录里面。

src 目录里面包含如下的目录和文件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1kPPXZxs-1595228289424)(/Users/Jie/Library/Application Support/typora-user-images/image-20200716135131370.png)]

• App.vue：这个是项目的入口组件。
• assets：放置静态资源
• components：组件目录，放置所书写的组件（偏功能型的组件）。
• main.js：入口 js 文件
• router：路由目录，里面存放所书写的路由。
• store：状态仓库，管理所有组件的状态。
• views：视图组件目录（放置视图组件）

首先，我们来看一个单文件组件的结构。

在使用脚手架搭建的项目中，组件一般都是以单文件的形式存在的。vue 单文件组件的后缀为 vue。

结构如下：

<template>
	// 书写组件的结构  
</template>

<script>
  // 组件对应的 js
</script>

<style>
  // 组件对应的样式
</style>

使用 vbase 可以快速生成一个单文件组件的结构。