创建一个componets/Child2.vue
目的是给此div加上一个背景色。
<template>
<div class="Child1">
<h1>This is Child 2</h1>
</div>
</template>
<script>
export default {
data () {
return {}
},
methods: {}
}
</script>
<style lang="scss">
div {
background-color: red;
}
</style>
修改componets/Child1.vue
<template>
<div class="Child1">
<h1>This is Child 1</h1>
</div>
</template>
<script>
export default {
data () {
return {}
},
methods: {}
}
</script>
<style lang="scss">
div {
background-color: yellow;
}
</style>
修改About.vue
<template>
<div class="about">
<h1>This is an about page</h1>
hello vue-单文件组件
<el-input type="text" v-model="mytext" />
<el-button @click="handleClick">点击</el-button>
<el-col>
<p>{{ outtext }}</p>
</el-col>
<child1> </child1>
<child2></child2>
</div>
</template>
<script>
import child1 from '../components/Child1'
import child2 from '../components/Child2'
export default {
components: {
child1,
child2
},
data () {
return {
mytext: '',
outtext: '暂无内容'
}
},
methods: {
handleClick () {
debugger
if (this.mytext.length <= 0) {
this.outtext = '暂无内容'
return false
}
this.outtext = this.mytext
}
}
}
</script>
这里出现child2.vue的颜色把child1.vue的颜色覆盖的现象。（后面的会覆盖先插入的css）
scoped
style标签加上scoped属性，css局部生效。
修改child1.vue
<template>
<div class="Child1">
<h1>This is Child 1</h1>
</div>
</template>
<script>
export default {
data () {
return {}
},
methods: {}
}
</script>
<style lang="scss" scoped>
div {
background-color: yellow;
}
</style>
修改child2.vue
<template>
<div class="Child2">
<h1>This is Child 2</h1>
</div>
</template>
<script>
export default {
data () {
return {}
},
methods: {}
}
</script>
<style lang="scss" scoped>
div {
background-color: red;
}
</style>
原理是自动生成唯一码（不冲突 ）的属性选择器。、
lint
格式化代码中的错误。
npm run lint
关闭eslint：
vue.config.js中的
linOnSave:false
.eslinttrc 删除@vue/standard
Vue.config.js配置
#vue.config.js
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
（1）proxy代理
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过
vue.config.js 中的 devServer.proxy 选项来配置。
devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：
module.exports = {
devServer: {
proxy: 'http://localhost:4000'
}
}
这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。
如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。
module.exports = {
devServer: {
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}
在此之前已经npm安装了axios。
可以如下设置，会自动接管所有“/axios”的请求并转向https://www.runoob.com/页面下：
module.exports = {
devServer: {
proxy: {
'/axios': {
target: 'https://www.runoob.com/',
// ws: true, // 如果有web socket请求时，设置ws为true
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}
可修改Child1.vue然后浏览器Debug看下：
<template>
<div class="Child1">
<h1>This is Child 1</h1>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {}
},
methods: {},
mounted () {
axios.get('/axios/vue2/vue-tutorial.html').then(res => {
debugger
})
}
}
</script>
<style lang="scss" scoped>
div {
background-color: yellow;
}
</style>
alias别名配置
导入import经常看到的@/XXX,其中的@就是/src的别名。
publicPath
部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。
默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/production-sub-path/'
: '/'
}
pages
vue当然可以做单页面、多页面开发
在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：
一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；
或一个指定其 entry 的字符
module.exports = {
pages: {
index: {
// page 的入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时，
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话，就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
subpage: 'src/subpage/main.js'
}
}
假设和后端约定的数据，可以提前伪造，或者说约定俗成。
等后端准备好，切换接口即可。
专业术语叫：利用json-server实现mock数据。
首先需要安装插件。
rpm install -g json-server
剩下的都在https://github.com/typicode/json-server/
单文件swiper引入
就是在单个文件引入css和js即可
import Swiper from 'swiper' // js模块
import 'swiper/dist/css/swiper.css' // css模块
