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>