Vue创建项目  

1. 使用vue-cli创建模板项目，是vue官方提供的脚手架工具

2. vue-cli的github地址：GitHub - vuejs/vue-cli at v2

3. 创建项目命令

• npm install -g vue-cli：安装vue-cli脚手架
• vue init webpack vue_demo：使用webpack模板创建项目
• cd vue_demo：进入项目目录
• npm install：安装项目需要的依赖
• npm run dev：启动vue项目

4. 可以选择的项目模板

 5. 项目目录结构

• build : webpack 相关的配置文件夹(基本不需要修改)
  • dev-server.js : 通过 express 启动后台服务器
• config: webpack 相关的配置文件夹(基本不需要修改)
  • index.js: 指定的后台服务的端口号和静态资源文件夹
• node_modules：依赖包
• src : 源码文件夹
• components: vue 组件及其相关资源文件夹
  • App.vue: 应用根主组件
  • main.js: 应用入口 js
  • static: 静态资源文件夹
• .babelrc: babel 的配置文件
• .eslintignore: eslint 检查忽略的配置
• .eslintrc.js: eslint 检查的配置
• .gitignore: git 版本管制忽略的配置
• index.html: 主页面文件
• package.json: 应用包配置文件
• README.md: 应用描述说明的 readme 文件

6. 项目发布运行

• 静态服务器（serve）

npm install -g serve
serve dist（dist是打包生成的文件夹）
访问: http://localhost:5000

• 动态web服务器（tomcat）

修改配置: webpack.prod.conf.js
output: {
	publicPath: '/xxx/' //打包文件夹的名称
}
重新打包:
npm run build
修改 dist 文件夹为项目名称: xxx
将 xxx 拷贝到运行的 tomcat 的 webapps 目录下
访问: http://localhost:8080/xxx

Eslint工具

1. ESLint是一个代码规范检查工具，它定义了很多特定的规则，一旦你的代码违背了某一规则，eslint会作出非常有用的提示。

2. ESLint 提供以下几种校验

• 语法错误校验
• 不重要或丢失的标点符号， 如分号
• 没法运行到的代码块（使用过 WebStorm 的童鞋应该了解）
• 未被使用的参数提醒
• 确保样式的统一规则， 如 sass 或者 less
• 检查变量的命名

3. 错误等级

• 0： 关闭规则。
• 1： 打开规则， 并且作为一个警告（信息打印黄色字体）
• 2： 打开规则， 并且作为一个错误（信息打印红色字体

4. 相关配置文件

• .eslintrc.js : 全局规则配置文件

'rules': {
    'no-new': 1
}

• 在 js/vue 文件中修改局部规则

/* eslint-disable no-new */
new Vue({
    el: 'body',
    components: { App }
})

• .eslintignore: 指令检查忽略的文件

*.js
*.vue

组件的使用

1. 组件是什么？

• 组件是可复用的 Vue 实例，且带有一个名字。
• 与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
• 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块

2. 组件化与模块化

• 组件化： 从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用
• 模块化： 从代码逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块的职能单一

3. 组件命名方式

• kebab-case（短横线命名）：Vue.component('my-component-name', { /* ... */ })
• PascalCase（帕斯卡命名法）：Vue.component('MyComponentName', { /* ... */ })
  • 当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。
  • 注意，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
  • 例如字符串模板中{{ }}语法中不能是短横线连接方式。此处只能是驼峰命名方式。若为短横线的命名方式，则会报错NAN。

4. 字符串模板和dom模板的区别

• 字符串模板是放在script标签里，js 的字符串里，原先不参与页面渲染的一串字符
• dom模板是原先就写在页面上的，能被浏览器识别的 html 结构，会在一加载就被浏览器渲染

5. 全局注册组件

• 全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。

Vue.component('my-component-name', {
  // ... 选项 ...
})

6. 局部注册组件

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

• 局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则需要这样写：

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}