Vue-cli基础

Vue-cli基础

安装步骤

1、全局安装Vue-cli：

npm install vue-cli -g

2、查看是否安装成功：

vue -V

3、初始化项目：

vue init webpack 自定义目录名称

4、进入到第3步定义的目录：

cd 你的目录名称

5、安装项目依赖插件：

npm install

6、启动服务器：

npm run dev

目录介绍

build webpack：

配置相关

config webpack：

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：

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

package.json：

整个项目的描述及插件

常见错误

在大家用vue-cli创建工程的时候，会有一项，使用使用eslint，如果选择了y，那么工程就会安装并启用eslint。下面列举下常见的错误提示 ：

1、多余的分号：

2、定义了却未使用的变量 ：

3、结尾多余空格：

4、超过一行的空行：

5、代码尾行应该有空行：

PS：错误不可能列举完，如遇其它错误，教大家一招：把报错信息，扔到google，一看便知！！！