一产园、npm引用三方
-
先修改 package.json 配置
查看api版本號(hào).png
三方文件版本配置.png - 然后執(zhí)行：sudo npm install 命令行
- 重新 npm run dev
二坯约、修改代碼格式限制
-
查看終端報(bào)錯(cuò)查看代碼格式報(bào)錯(cuò).png
-
點(diǎn)擊報(bào)錯(cuò)提示網(wǎng)址盖溺，查看錯(cuò)誤信息答姥，及配置信息查看錯(cuò)誤信息.png
-
找到eslintrc.js -> 'rules' -> 配置配置代碼規(guī)范.png
三铣除、設(shè)置根頁(yè)面
步驟：1. 找到build/webpack.dev.conf.js
2.修改代碼
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
四、設(shè)置js文件引用后綴可省略
設(shè)置文件后綴可省略.png
五鹦付、配置網(wǎng)絡(luò)請(qǐng)求api數(shù)據(jù)
配置網(wǎng)絡(luò)請(qǐng)求api數(shù)據(jù).png
六尚粘、使用stylus報(bào)錯(cuò)
檢查是否同時(shí)安裝了stylus 和 stylus-loader
七、使用stylus設(shè)置1像素border
1. 在minix.styl中改寫(xiě)1px邊框的樣式實(shí)現(xiàn)代碼
border-1px($color)
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color
content: ' '
2. 在base.styl中設(shè)置：根據(jù)設(shè)備最小dpi敲长，指定縮放比例
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
3. 對(duì)應(yīng)class中修改boder邊框設(shè)置代碼
.tab
display: flex
width: 100%
height: 40px
line-height: 40px
border-1px(rgba(77, 17, 27, 0.1))
4. 對(duì)應(yīng)div添加border1px的class
<div class="tab border-1px">
<div class="tab-item">
<!-- 使用 router-link 組件來(lái)導(dǎo)航. -->
<router-link to="/goods">商品</router-link>
</div>
<div class="tab-item">
<!-- 使用 router-link 組件來(lái)導(dǎo)航. -->
<router-link to="/ratings">評(píng)論</router-link>
</div>
<div class="tab-item">
<!-- 使用 router-link 組件來(lái)導(dǎo)航. -->
<router-link to="/seller">商家</router-link>
</div>
</div>
八郎嫁、配置vue-router路由
- npm導(dǎo)入vue-router
- 配置main.js
import VueRouter from 'vue-router';
// 1. 定義（路由）組件。
// 可以從其他文件 import 進(jìn)來(lái)
import goods from './components/goods/goods';
import ratings from './components/ratings/ratings';
import seller from './components/seller/seller';
Vue.use(VueRouter);
// 2. 定義路由
// 每個(gè)路由應(yīng)該映射一個(gè)組件潘明。 其中"component" 可以是
// 通過(guò) Vue.extend() 創(chuàng)建的組件構(gòu)造器行剂，
// 或者，只是一個(gè)組件配置對(duì)象钳降。
// 我們晚點(diǎn)再討論嵌套路由。
const routes = [
{ path: '/', redirect: '/goods' }, // 設(shè)置默認(rèn)頁(yè)面
{ path: '/goods', component: goods },
{ path: '/ratings', component: ratings },
{ path: '/seller', component: seller }
];
// 3. 創(chuàng)建 router 實(shí)例腌巾，然后傳 `routes` 配置
const router = new VueRouter({
routes,
linkActiveClass: 'active'
});
// 4. 創(chuàng)建和掛載根實(shí)例遂填。
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
});
九、設(shè)配背景圖片2x澈蝙，3x
配置
bg-image($url)
background-image: url($url + "@2x.png")
@media (-webkit-min-device-pixel-ratio: 3), (-min-device-pixel-ratio: 3)
background-image: url($url + "@3x.png")
引用
.brand
display: inline-block
width: 30px
height: 18px
bg-image('brand')
-
代碼書(shū)寫(xiě)需要注意的地方
- 網(wǎng)絡(luò)請(qǐng)求獲取圖片時(shí)吓坚，不能直接使用'src',需要使用'v-bind:src'或':src'
- 定義props屬性接收外部傳遞過(guò)來(lái)的參數(shù)
export default {
// 定義props屬性接收外部傳遞過(guò)來(lái)的參數(shù)
props: {
seller: {
type: Object
}
}
-3.vue阻止事件冒泡
@click.stop="pay"
-4. 高相對(duì)于寬100%的CSS設(shè)置
width: 100%
height: 0
padding-top: 100%
-5. v-show也可以綁定一個(gè)字段，一個(gè)屬性灯荧，也可以綁定一個(gè)方法礁击，這個(gè)方法返回一個(gè)函數(shù)計(jì)算結(jié)果
-6. 使用BetterScroll滾動(dòng)區(qū)域三方控件
Better Scroll
第一步：
1、外部一個(gè)固定fixed布局的div固定定位滾動(dòng)區(qū)域
2、內(nèi)部一個(gè)wrapper層的div來(lái)展示內(nèi)容哆窿，自動(dòng)撐高
第二步：
引入BetterScroll（import BScroll from 'better-scroll';）
第三步：
初始化 BScroll
<div class="ratings" ref="ratings">
<div class="ratings-content">
… … … …
</div>
</div>
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.ratings, {
click: true
});
});
-
實(shí)用文章
