vue项目基础配置
2018-09-26 本文已影响0人
情有千千节
一、项目初始化创建
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图标的引入
- 使用iconfont将采集好的矢量图下载下来导入到assets/font目录下
- 在 assets/css/index.css中引入@import '../font/iconfont.css';
- 在 assets/font/iconfont.js头部加上/eslint-disable/解决eslint报错的问题
- 在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的具体使用情况在文档中已经说得很清楚了.这里简单写一下
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)
完成引用
