首页技术

vue项目基础配置

知乎:青梅煮码2020-08-26 16:56:27 快审 推荐 顶置 4293
vue项目基础配置

一、项目初始化创建

1.本地初始化

bash 切换到桌面 运行 vue init Webpack vue-demo 生成初始化vue项目

2.建立和码云的连接

在Gitlab创建一个没有readme的空项目

3.建立本地仓库

打开第一步创建的项

git init <!-- 初始化git仓库 >
git remote add origin http://gitee.xxxx // 建立连接 

4.保存上传

使用vscode自带的git工具进行保存,修改上传即可

二、项目初始化配置

1.服务器代理配置

  • config/index.js
proxyTable: {proxyTable: {
 '/api': {
 target: 'http://192.168.0.108',
 changeOrigin: true,
 pathRewrite: {
 '^/api':''
 }
 }}
 
  • config/dev.env.js
API_HOST: '"/api/"' 
  • config/prod.env.js
API_HOST: '"api.qmzm.io"' 

2.axios封装

npm install axios --save

3.svg图标的引入

  1. 使用iconfont将采集好的矢量图下载下来导入到assets/font目录下
  2. 在 assets/css/index.css中引入@import ‘../font/iconfont.css’;
  3. 在 assets/font/iconfont.js头部加上/eslint-disable/解决eslint报错的问题
  4. 在main.js中引用import ‘./assets/js/iconfont’ svg字体彩色需要(如果不需要彩色字体的话,可以用另外两种方式,icon下载的demo有使用方法)
    这样就可以在项目中使用引入的图标了,引入的时候要注意设置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: '个人中心', checkLogin: true}
 }]
 }
 ]})
 
 
  • APP.vue
<template><!-- 因为设置了跟路由为tabbar所以app中的路由直接到tabbar,所有的二级路由在tabbar中设置 -->
 <div id="app">
 <router-view v-wechat-title="$route.meta.title" img-set="/static/logo.png"></router-view>
 </div></template>
 
  • 登陆鉴权
router.beforeEach((to, from, next) => {
    if (to.meta.checkLogin) {
        if (store.state.userInfo) {
        next()
        } else {
            next({path: '/login'})
        }
    } else {
        next()
    }
    // 根据路由来显隐底部导航栏
    if (to.meta.hideFooter) {
        store.state.hideFooter = true
        } else {
        store.state.hideFooter = false
    }
    next()})
 
 
  • 一级路由
<!----><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;
            }
        }

        // 点击切换路由的时候按钮高亮
        .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需要进一步配置
  • 新建assets/css/mixin.scss存储scss函数以及全局变量等
    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')
        }
    })}
 

此时,全局变量都设置好了,可以在不同页面直接引用

2.基本配置CSS的引入

  • assets/css/index.scss // 统一管理css
  • assets/css/base.scss // 系统的基础设置
  • 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'), // 预加载图片
 error: require('../static/loading-svg/loading-balls.svg') // 错误展示占位图})
 
 

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标签中设置title即可

5.vconsole的引入

vconsole github文档地址

vconsole的具体使用情况在文档中已经说得很清楚了.这里简单写一下

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配置

10.SSR的配置


标签:

随机快审展示 刷新 快审榜
加入快审,优先展示

加入VIP

发表评论

  • * 评论内容:
  •  

精彩评论

  • 无任何评论信息!