vue入门8---vue组件创建与使用、项目打包、eslint编码规范检查

一、Vue组件

定义：vue组件即一个界面的局部功能模块，它包含实现这个功能模块的所有资源，可能有html/css/js/img等。vue的根组件App.vue
    在一个vue文件中三部分：、、 (分别对用网页HTML、js、css文件）
可以在：preference --- Editor --- code style --- File and code Templates 中配置vue模板

1、写一个vue组件文件Hello.vue

2.在App.vue中引用这个组件 （3个步骤）

3.在App.js（入口js)中使用App.vue,将App.vue的所有组件渲染到index.html文件中

/**
入口js:创建vue实例
*/
// 1.先引入vue
import Vue from 'vue' （注意大小写分别）
// 2. 再引入App组件
import App from './App.vue'
new Vue({
    el: '#app' // 看index.html 中的id元素, 
    components: {
      App
    },
    template: '
})

4. 在index.html中展示

二、项目打包：

npm run build 对当前的项目编译打包，并生成dist文件

发布：

方式1、使用静态服务器工具包
npm install -g serve
serve dist
方式2、使用动态 web 服务器(tomcat)
修改配置: build/webpack.prod.conf.js
output: {
publicPath: '/项目名称/' //项目名称和打包文件夹的名称相同
}
重新打包：npm run build
将项目放到tomcat 的 webapps/root中, 访问: http://localhost:8080/xxx

三、编码规范检查

1、让某个eslint规则失效
在文件.eslintrc.js、.eslintignore中配置
*.js(忽略检查所有js文件）
*.vue(忽略检查所有vue文件）