Vue项目搭建

技术选择

vue2.0、vue-router、vuex、axios、lib-flexible

css编写

stylus 相关技术文档 http://www.zhangxinxu.com/jq/stylus/interpolation.php

规定TAB 为2个空格 如下： <style lang="stylus" scoped> ul list-style-type: none padding: 0 li display: inline-block margin: 0 10px a color: #42b983 font-size 32px </style>

页面自适应 选用淘宝 lib-flexible

安装lib-flexible

npm install lib-flexible --save 在main.js页面引入import ‘lib-flexible‘;

安装 px2rem-loader

npm install px2rem-loader

配置px2rem-loader

在build/untils.js文件里配置如下： 我们只需要在cssLoader后面加上一个px2remLoader即可，px2rem-loader的remUnit 选项意思是1rem=多少像素，结合lib-flexible，我们将px2remLoader的option.remUnit 设置成设计稿宽度的1/10，这里我们假设设计稿的宽度为750px ,并将px2remLoader 放进loaders数组中 var px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 } } function generateLoaders (loader, loaderOptions) { var loaders = [cssLoader,px2remLoader] 这里加入px2remLoader

页面目录结构搭建

src common // 公共文件 stylus components // 组件及页面 pages router // 路由 static //静态资源，reset.css

环境基础配置

build文件夹 ~ webpack.base.conf.js 文件配置文件引用别名

resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'components': resolve('src/components'), 'common': resolve('src/common'), } }

打包后图片 字体 引入路径问题 引用相对路径 在config文件夹 修改index.js代码 如下：修改 assetsPublicPath: '/',

build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './',

打包后图片 字体 引入路径问题 引用相对路径 在build文件夹 修改utils.js代码 如下：增加 publicPath: '../../' 这一行

if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' })

.Vue 文件模板

<template> <div class=""> </div> </template> <script> </script> <style lang="stylus" rel="stylesheet/stylus" scoped> </style>