提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue项目基础配置

Vue配置项目基础
2023-06-13 09:15:27 时间

一、项目初始化创建

1.本地初始化

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

2.建立和码云的连接

在码云上创建一个没有readme的空项目

我后来在github重新创建并引用了码云的项目,主要维护github,然后使用码云的强制更新关联GitHub的地址.

3.建立本地仓库

打开第一步创建的项目
git init  <!-- 初始化git仓库 -->
git remote add origin http://gitee.xxxx // 建立连接

4.保存上传

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

二、项目初始化配置

1.服务器代理配置

  • 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图标的引入

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

相关文章