Vue-cli

什么是Vue-cli

Vue-cli是Vue的脚手架工具，能够帮助我们写好Vue基础代码的工具，它能够帮助我们搞定目录结构，本地调试，代

码部署，热加载，单元测试等工作。

vue-cli使用的webpack是2.0版本Vue-cli是Vue的脚手架工具，能够帮助我们写好Vue基础代码的工具，它能够帮助我们搞定目录结构，本地调试，代

码部署，热加载，单元测试等工作。

vue-cli使用的webpack是2.0版本

安装：

前置条件：

node版本在4以上，npm版本在3以上

1，安装vue-cli：npm install vue-cli -g

vue -V 查看是否安装成功

2，初始化项目：vue init webpack 你的项目名称

3，进入项目目录：cd 你的项目目录

4，安装项目依赖：npm install

5，在localhost启动测试服务器：npm run dev

6，生成上线目录（部署）：npm run build

目录介绍：

build webpack配置相关

config webpack配置相关（生产环境和开发环境）

node_moules 通过npm install 安装的依赖代码库

src 项目源码（我们开发的所有代码都会放在src目录下）

static 放第三方静态资源的

.gitkeep 提交git（空文件夹是不能提交到git的，所以添加了一个.gitkeep文件）

.babelrc ES6转ES5配置文件

.editorconfig 编辑器的配置

.eslintignore 代码风格检测配置（忽略build和config文件夹下的js文件）

.eslintrc.js 代码风格检查配置

.gitignore 忽略掉提交到git的文件

index.html 入口文件

css和js是会动态插入到这个页面的

main.js js入口文件

App.vue 整站的实例文件（可以看成是本项目的大组件或根组件）

组件分为三个部分：template，script，style

package.json 整个项目的描述及插件

编写组件步骤：

首先创建一个.vue文件，.vue文件里面包含三部分， template、javascript，style，然后使用export default导

出一个对象，供其他组件使用。App.vue要用hello.vue组件，那么首先需要import进来，然后通过components注册，才

能在App.vue里面使用

用法及注意事项：

export default是什么？

使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上

手，未必愿意阅读文档，去了解模块有哪些属性和方法。为了给用户提供方便，让他们不用阅读文档就能加载模块，就

要用到export default命令，为模块指定默认输出。