vue新建移動端項目模板

時間 2019-11-26

標籤 vue 新建移動項目模板欄目無線简体版

原文原文鏈接

vue移動端模板

tip：

一、ui咱們使用的是vux，慶幸的是，解決了打包過大的問題，css

二、這裏使用的是rem佈局，移動端仍是要使用ipad和不一樣尺寸的手機html

三、版本：webpack:3.6.0 vue:2.5.2 vue-loader:13.3.0 vux:2.8.1 vux-loader:1.2.7 版本很重要，版本很重要，版本很重要，vue及生態更新太快，控制好版本，之前的版本就是打包過大！！！vue

四、vue異步加載組件基於vue-loader13.0.0之後的最近寫法node

五、使用的是官方腳手架，這裏默認你已經使用了最新的腳手架，建立了一個新的項目，在最新的基礎上進行配置,webpack

　　若是你沒有初始化項目，看官方教程：https://doc.vux.li/zh-CN/install/biolerplate.htmlgit

do it：

一、配置UI

下載vux 以及loadergithub

npm install vux vux-loader --save

接下來咱們打開vux官方文檔web

https://doc.vux.li/zh-CN/install/manual-usage.htmlvue-cli

# 官方要求咱們如此作
引入 reset.less，默認樣式不包含reset，而且部分用戶本身有一套reset樣式，所以須要在App.vue進行手動引入

配置 vue-loader（經過配置vux-loader實現）

配置babel-loader以正確編譯 VUX 的js源碼（經過配置vux-loader實現）

安裝less-loader以正確編譯less源碼

添加 viewport meta

添加 Fastclick 移除移動端點擊延遲

添加 webpack plugin, 在構建後去除重複css代碼（經過配置vux-loader實現）

引入reset.less

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="less">
@import './static/css/reset.less';//本地本身的移動端樣式
@import '~vux/src/styles/reset.less';// vux的樣式
</style>

配置 vue-loader（經過配置vux-loader實現） [ 這個是最難配置的 ]

添加 webpack plugin, 在構建後去除重複css代碼（經過配置vux-loader實現）

由於vue-cli升級後，須要這樣手動來改， --表示我去掉的代碼，++表示我加入的代碼npm

'use strict'

const path = require('path')

const utils = require('./utils')

const config = require('../config')

const vueLoaderConfig = require('./vue-loader.conf')

const vuxLoader = require('vux-loader')

function resolve(dir) {

return path.join(__dirname, '..', dir)

}

const createLintingRule = () => ({

test: /\.(js|vue)$/,

loader: 'eslint-loader',

enforce: 'pre',

include: [resolve('src'), resolve('test')],

options: {

formatter: require('eslint-friendly-formatter'),

emitWarning: !config.dev.showEslintErrorsInOverlay

}

})

-- module.exports = {

++ let webpackConfig = {

context: path.resolve(__dirname, '../'),

entry: {

app: './src/main.js'

output: {

path: config.build.assetsRoot,

filename: '[name].js',

publicPath: process.env.NODE_ENV === 'production' ?

config.build.assetsPublicPath : config.dev.assetsPublicPath

resolve: {

extensions: ['.js', '.vue', '.json'],

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src'),

}

module: {

rules: [

...(config.dev.useEslint ? [createLintingRule()] : []),

{

test: /\.less$/,

loader: "style-loader!css-loader!less-loader",

{

test: /\.vue$/,

loader: 'vue-loader',

options: vueLoaderConfig

{

test: /\.js$/,

loader: 'babel-loader',

include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

}

{

test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

}

{

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

}

]

node: {

// prevent webpack from injecting useless setImmediate polyfill because Vue

// source contains it (although only uses it if it's native).

setImmediate: false,

// prevent webpack from injecting mocks to Node native modules

// that does not make sense for the client

dgram: 'empty',

fs: 'empty',

net: 'empty',

tls: 'empty',

child_process: 'empty'

}

++ module.exports = vuxLoader.merge(webpackConfig, {

++ plugins: ['vux-ui', 'progress-bar', 'duplicate-style']

++ })

配置`babel-loader`以正確編譯 VUX 的js源碼（經過配置vux-loader實現）

在根目錄下有一個文件.babelrc
  "plugins": ["transform-vue-jsx", "transform-runtime", {"name":"vux-ui"}],

其中{"name":"vux-ui"}須要咱們手動來添加進去

安裝`less-loader`以正確編譯less源碼

npm install less less-loader --save-dev

執行命令就能夠了

添加 `viewport` meta

在根目錄下的index.html文件里加入後以下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>smartbi</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
  </script>
</html>


固然，若是你是自適應的移動端應用，不在這裏添加viewport也是能夠的，由於咱們要動態來添加視口，已達到自適應的目的

添加 `Fastclick` 移除移動端點擊延遲

在main.js文件裏添加

const FastClick = require('fastclick')
FastClick.attach(document.body)

固然在移動端裏邊可能會出現沒法點擊的問題，也許你加上以下代碼就會解決
import {Script} from 'vm'

至此，ui咱們就搞定了，不過還有個小建議，開啓eslint，這樣避免打包過大的問題，雖然會不少報錯，可是人家都有提示，改起來都簡單

二、rem移動端自適應佈局

在main.js裏邊引入一個js
import '../src/static/js/rem'// 爲自適應rem佈局，移動端確定要用的

接下來說講怎麼用我把rem.js裏邊的代碼拿出說說，不長
(
  function (doc, win) {
    /** 獲取像素比 */
    var pixelRatio = 1 / window.devicePixelRatio
    /** 經過js動態設置視口(viewport) */
    document.write('<meta name="viewport" content="width=device-width,initial-scale=' + pixelRatio + ',minimum-scale=' + pixelRatio + ',maximum-scale=' + pixelRatio + '" />')
    /** 條件：尺寸越大，則字體大小越大。尺寸越小，則字體大小越小。
    獲取html節點 */
    var html = document.getElementsByTagName('html')[0]
    // 獲取屏幕寬度
    var pageWidth = html.getBoundingClientRect().width
    // 屏幕寬度 / 固定數值 = 基準值
    html.style.fontSize = pageWidth / 16 + 'px'
  }
)(document, window)

-----------------------------------------------------------------------------------------
在這裏咱們動態添加了視口，在這裏設置的固定數值爲16，若是你以蘋果六、7位基準的話，屏幕寬度375 / 固定值16 = 基準值 23.4375 + 'px'
實際開發中咱們的樣式用less，定義一個變量@rem: 1px ; @rem: 23.4375rem;開發的時候這樣用：
div{
    height: 20/@rem;
    widht: 10/@rem;
}
若是你沒引入了rem.js,你就用變量@rem: 1px;註釋掉@rem: 23.4375rem;
若是引入了rem.js就註釋掉@rem: 1px; 使用@rem: 23.4375rem;
這樣的話，即便boss說不搞自適應了，你也不會改太多的代碼，
至於固定值，你能夠隨便寫，好比好計算的15，這樣你定義@rem :25rem;就能夠了（375/15=25);
關於視口的在這裏不作太多的解釋，請自行百度，而且視口的概念很重要仍是要看看的

三、vue異步加載組件基於vue-loader13.0.0之後的最近寫法

之前在router.js裏邊這樣寫
const space = resolve => require(['../components/common/space'], resolve);

13.0.0之後要這樣寫
const index = () => import('@/pages/index').then(m => m.default)

四、webpack生產打包，須要修改，腳手架自帶的不行

在跟目錄下，config文件夾有個indexjs

將
assetsPublicPath: '/',
修改爲
assetsPublicPath: './',

webpack其餘的配置還不太好說，畢竟webpack4.0出來了，改動太大了！！！！！！！！！！！！！！！！！！！！！！！！！！！

項目下載：

https://github.com/fooller/vue-template-mobile.git

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。