一、項(xiàng)目初始化創(chuàng)建
1.本地初始化
bash 切換到桌面 運(yùn)行 vue init webpack vue-demo 生成初始化vue項(xiàng)目
2.建立和碼云的連接
在碼云上創(chuàng)建一個(gè)沒有readme的空項(xiàng)目
我后來在github重新創(chuàng)建并引用了碼云的項(xiàng)目,主要維護(hù)github,然后使用碼云的強(qiáng)制更新關(guān)聯(lián)GitHub的地址.
3.建立本地倉庫
打開第一步創(chuàng)建的項(xiàng)目
git init <!-- 初始化git倉庫 -->
git remote add origin http://gitee.xxxx // 建立連接
4.保存上傳
使用vscode自帶的git工具進(jìn)行保存奈惑，修改上傳即可
二约炎、項(xiàng)目初始化配置
1.服務(wù)器代理配置
- config/index.js
proxyTable: {
'/api': {
target: 'http://192.168.0.106.3439',
changeOrigin: true,
pathRewrite: {
'^/api':''
}
}
}
- config/dev.env.js
API_HOST: '"/api/"'
- config/prod.env.js
API_HOST: '"api.qiankaiwangluo.com"'
2.axios封裝
npm install axios --save
3.svg圖標(biāo)的引入
- 使用iconfont將采集好的矢量圖下載下來導(dǎo)入到assets/font目錄下
- 在 assets/css/index.css中引入@import '../font/iconfont.css';
- 在 assets/font/iconfont.js頭部加上/eslint-disable/解決eslint報(bào)錯(cuò)的問題
- 在main.js中引用import './assets/js/iconfont' svg字體彩色需要(如果不需要彩色字體的話,可以用另外兩種方式,icon下載的demo有使用方法)
這樣就可以在項(xiàng)目中使用引入的圖標(biāo)了,引入的時(shí)候要注意設(shè)置icon的大小
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
4.vue-router的配置
- 路由的基本配置
import Vue from 'vue'
import Router from 'vue-router'
import tabbar from '@/components/tabbar/tabbar'
/* eslint-disable */ <!-- 路由的懶加載 -->
const home = r => require.ensure([], () => r(require('@/pages/home/home')), 'home')
const goods = r => require.ensure([], () => r(require('@/pages/goods/goods')), 'goods')
const mine = r => require.ensure([], () => r(require('@/pages/mine/mine')), 'mine')
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: tabbar, <!-- 根路由-->
children: [{
path: '',
redirect: 'home'
},{
path: '/home',
name: 'home',
component: home,
meta: {title: '首頁'}
},{
path: '/goods',
name: 'goods',
component: goods,
meta: {title: '商品列表'}
},{
path: '/mine',
name: 'mine',
component: mine,
meta: {title: '個(gè)人中心', checkLogin: true}
}]
}
]
})
- APP.vue
<template>
<!-- 因?yàn)樵O(shè)置了跟路由為tabbar所以app中的路由直接到tabbar,所有的二級(jí)路由在tabbar中設(shè)置 -->
<div id="app">
<router-view v-wechat-title="$route.meta.title" img-set="/static/logo.png"></router-view>
</div>
</template>
- 登陸鑒權(quán)
router.beforeEach((to, from, next) => {
if (to.meta.checkLogin) {
if (store.state.userInfo) {
next()
} else {
next({path: '/login'})
}
} else {
next()
}
// 根據(jù)路由來顯隱底部導(dǎo)航欄
if (to.meta.hideFooter) {
store.state.hideFooter = true
} else {
store.state.hideFooter = false
}
next()
})
- 一級(jí)路由
<!---->
<template>
<div class="tabbar">
<div class="tab">
<router-link to="/home" class="tab-item"> <span class="icon iconfont icon-home"></span><p>首頁</p></router-link>
<router-link to="/goods" class="tab-item"> <span class="icon iconfont icon-kinds"></span><p>分類</p></router-link>
<router-link to="/mine" class="tab-item"> <span class="icon iconfont icon-mine"></span><p>我的</p></router-link>
</div>
<!-- 需要緩存的 -->
<keep-Alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-Alive>
<!-- 不需要緩存的 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
<script type="text/ecmascript-6">
export default {
data () {
return {
}
},
mounted () {},
methods: {},
computed: {},
components: {},
watch: {}
}
</script>
<style scoped lang="scss">
.tab {
display: flex;
position: absolute;
bottom: 0;
width: 100%;
height: 2.45rem;
z-index: 200;
box-shadow: rgba(154, 141, 141, 0.6) 0px 0px 10px 0px;
box-sizing: border-box;
opacity: .95;
.tab-item {
flex: 1;
font-size:1rem;
span {
font-size: 1.2rem;
line-height: 1.6rem;
.icon {
width: 2rem;
height: 2rem;
}
}
p {
font-size: .65rem;
line-height: .75rem;
}
}
// 點(diǎn)擊切換路由的時(shí)候按鈕高亮
.router-link-active {
color: red;
}
}
</style>
5.vuex的配置
store
|-actions.js
|-getters.js
|-index.js
|-mutations.js
|-mutations-types.js
|-state.js
三凹蜈、其他配置
1.sass(scss)的引入
"node-sass": "^4.8.3",
"sass-loader": "^6.0.7",
"sass-resources-loader": "^1.3.3",
- 引入以上依賴之后,就可以在文件中使用scss了
- scss的具體使用參考阮一峰老師的博客
- sass教程
- 但是如果想更加智能的使用scss需要進(jìn)一步配置
- 新建assets/css/mixin.scss存儲(chǔ)scss函數(shù)以及全局變量等
build/utils.js
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
// scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus'),
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/css/mixin.scss')
}
}
)
}
此時(shí),全局變量都設(shè)置好了,可以在不同頁面直接引用
2.基本配置CSS的引入
- assets/css/index.scss // 統(tǒng)一管理css
- assets/css/base.scss // 系統(tǒng)的基礎(chǔ)設(shè)置
- assets/css/reset.scss // 基本樣式的清除
main.js中引入
import './assets/css/index.css' // 公用CSS
import './assets/js/rem.js' // rem適配
3.vue-lazyload的配置
static中引入圖片信息
npm install vue-lazyload --save
main.js
import lazylod from 'vue-lazyload'
Vue.use(lazylod, {
loading: require('../static/loading-svg/loading-spokes.svg'), // 預(yù)加載圖片
error: require('../static/loading-svg/loading-balls.svg') // 錯(cuò)誤展示占位圖
})
4.vue-wechat-title 的使用
Vue.use(require('vue-wechat-title'))
APP.vue
<router-view v-wechat-title="$route.meta.title" img-set="/static/logo.png"></router-view>
在路由的meta標(biāo)簽中設(shè)置title即可
5.vconsole的引入
vconsole的具體使用情況在文檔中已經(jīng)說得很清楚了.這里簡(jiǎn)單寫一下
package.json
> devDependencies
"vconsole": "^3.2.0"
npm install
main.js
/* eslint-disable */
import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
let vConsole = new VConsole() // 初始化
6.fastclick的引入
npm install fastclick --save
在main.js中
import fastclick from 'fastclick'
fastclick.attach(document.body)
完成引用
