vue項(xiàng)目基礎(chǔ)配置

一、項(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)的引入

  1. 使用iconfont將采集好的矢量圖下載下來導(dǎo)入到assets/font目錄下
  2. 在 assets/css/index.css中引入@import '../font/iconfont.css';
  3. 在 assets/font/iconfont.js頭部加上/eslint-disable/解決eslint報(bào)錯(cuò)的問題
  4. 在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 github文檔地址

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 文檔

npm install fastclick --save

在main.js中

import fastclick from 'fastclick'
 fastclick.attach(document.body)

完成引用

7.UI插件的使用

8.骨架屏的配置

骨架屏參考
骨架屏注入

9.TpeScript配置

這個(gè)要單拉出來講

10.SSR的配置

這個(gè)要單拉出來講

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市皆愉,隨后出現(xiàn)的幾起案子沪袭,更是在濱河造成了極大的恐慌,老刑警劉巖妒御,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件躯砰,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡携丁,警方通過查閱死者的電腦和手機(jī)琢歇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門兰怠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人李茫,你說我怎么就攤上這事揭保。” “怎么了魄宏?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵秸侣,是天一觀的道長。 經(jīng)常有香客問我宠互,道長味榛,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任予跌,我火速辦了婚禮搏色,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘券册。我一直安慰自己频轿,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布烁焙。 她就那樣靜靜地躺著航邢,像睡著了一般。 火紅的嫁衣襯著肌膚如雪骄蝇。 梳的紋絲不亂的頭發(fā)上膳殷,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音九火,去河邊找鬼赚窃。 笑死,一個(gè)胖子當(dāng)著我的面吹牛吃既,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播跨细,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼鹦倚,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了冀惭?” 一聲冷哼從身側(cè)響起震叙,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎散休,沒想到半個(gè)月后媒楼,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡戚丸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年划址,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了扔嵌。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡夺颤,死狀恐怖痢缎,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情世澜,我是刑警寧澤独旷,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站寥裂,受9級(jí)特大地震影響嵌洼,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜封恰,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一麻养、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧俭驮,春花似錦回溺、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至逸嘀,卻和暖如春车要,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背崭倘。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來泰國打工翼岁, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人司光。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓琅坡,卻偏偏與公主長得像,于是被迫代替她去往敵國和親残家。 傳聞我的和親對(duì)象是個(gè)殘疾皇子榆俺,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容