一、Vue组件
定义：vue组件即一个界面的局部功能模块，它包含实现这个功能模块的所有资源，可能有html/css/js/img等。vue的根组件App.vue
在一个vue文件中三部分：<template><div></div></template>、<script></script>、<style></style> (分别对用网页HTML、js、css文件）
可以在：preference --- Editor --- code style --- File and code Templates中配置vue模板
1、写一个vue组件文件Hello.vue
<template>
<!-- template中一定有根标签 -->
<div class="hello">组件Hello
<h1 class="msg">{{ msg }}</h1>
</div>
</template>
<script>
export default { // 默认代码: 向外暴露一个默认配置对象
name: 'Hello',
data () { // data可以写对象/函数，但是在组件中必须写成函数,
return {
msg: 'Welcome to Hello'
}
}
}
</script>
<style>
.msg {
color:#f00
}
</style>
2.在App.vue中引用这个组件 （3个步骤）
<template>
<div>引用组件
<Hello/> <!-- 第三步：使用组件标签 -->
</div>
</template>
<script>
//第一步：引用组件
import Hello from './components/Hello.vue'
export default {
//第二步：映射成组件标签
components: {
Hello
}
}
</script>
<style>
</style>
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: '<App/>
})
- 在index.html中展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue</title>
</head>
<body>
<div id="app">
<!--目的是在这个地方装入<App/>标签中的内容 -->
</div>
</html>
<!--组件化编码的基本流程
1). 拆分界面, 抽取组件
2). 编写静态组件
3). 编写动态组件
初始化数据, 动态显示初始化界面
实现与用户交互功能-->
二、项目打包：
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文件）
网友评论