創(chuàng)建一個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: '暫無內(nèi)容'
}
},
methods: {
handleClick () {
debugger
if (this.mytext.length <= 0) {
this.outtext = '暫無內(nèi)容'
return false
}
this.outtext = this.mytext
}
}
}
</script>
這里出現(xiàn)child2.vue的顏色把child1.vue的顏色覆蓋的現(xiàn)象帕涌。（后面的會覆蓋先插入的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
關(guān)閉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 服務器沒有運行在同一個主機上膀斋，你需要在開發(fā)環(huán)境下將 API 請求代理到 API 服務器梭伐。這個問題可以通過
vue.config.js 中的 devServer.proxy 選項來配置。
devServer.proxy 可以是一個指向開發(fā)環(huán)境 API 服務器的字符串：
module.exports = {
devServer: {
proxy: 'http://localhost:4000'
}
}
這會告訴開發(fā)服務器將任何未知請求 (沒有匹配到靜態(tài)文件的請求) 代理到http://localhost:4000仰担。
如果你想要更多的代理控制行為糊识，也可以使用一個 path: options 成對的對象。完整的選項可以查閱 http-proxy-middleware 摔蓝。
module.exports = {
devServer: {
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}
在此之前已經(jīng)npm安裝了axios赂苗。
可以如下設(shè)置，會自動接管所有“/axios”的請求并轉(zhuǎn)向https://www.runoob.com/頁面下：
module.exports = {
devServer: {
proxy: {
'/axios': {
target: 'https://www.runoob.com/',
// ws: true, // 如果有web socket請求時贮尉，設(shè)置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經(jīng)嘲枳蹋看到的@/XXX,其中的@就是/src的別名。
publicPath
部署應用包時的基本 URL绘盟。用法和 webpack 本身的 output.publicPath 一致鸠真，但是 Vue CLI 在一些其他地方也需要用到這個值悯仙，所以請始終使用 publicPath 而不要直接修改 webpack 的 output.publicPath。
默認情況下吠卷，Vue CLI 會假設(shè)你的應用是被部署在一個域名的根路徑上锡垄，例如 https://www.my-app.com/。如果應用被部署在一個子路徑上祭隔，你就需要用這個選項指定這個子路徑货岭。例如，如果你的應用被部署在 https://www.my-app.com/my-app/疾渴，則設(shè)置 publicPath 為 /my-app/千贯。
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/production-sub-path/'
: '/'
}
pages
vue當然可以做單頁面、多頁面開發(fā)
在 multi-page 模式下構(gòu)建應用搞坝。每個“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'
}
}
假設(shè)和后端約定的數(shù)據(jù)旱爆，可以提前偽造舀射，或者說約定俗成。
等后端準備好疼鸟，切換接口即可后控。
專業(yè)術(shù)語叫：利用json-server實現(xiàn)mock數(shù)據(jù)。
首先需要安裝插件空镜。
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模塊
