vue 移動端環境配置

1，進入項目src

2.，App.vue
取出template中<img src="./assets/logo.png">

 

3，進入 App.vue

　　刪除默認圖片：

  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <router-view/>
  </div>

　　刪除默認樣式，修改通用樣式：

<style>
 /* #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
 }  */
 *{
  padding: 0;
  margin: 0;
  list-style: none;
 }
</style>

　　

4，創建主要頁面，都使用以下方式：

　　每個組件都創建獨立文件夾/index.vue (默認index.vue是可以省略的，這樣很方便調用)

　　此外 文件：HelloWorld.vue 是不能刪除的，否則報錯。

 每個組件有且只有一個跟節點：

<template>
	<div class="detail-page">
		detail詳情
	</div>
</template>

　　

 

5，進入 router/index.js 進行路由配置

　　在頁面頂部引入主要頁面文件，並進行路由配置：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/header/' import Detail from '@/components/detail/'

Vue.use(Router)

export default new Router({
  routes: [
/*    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },*/
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/Detail',
      name: 'Detail',
      component: Detail
    },
  ]
})

　　

7，cnpm run dev 運行項目看是否出現問題。

 

8，在項目下面的index.html頁面進行移動端的配置：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
width=device-width 寬高等於設備寬度
initial-scale=1 設備初始縮放比例為1
maximum-scale=1 最大縮放比例為1
minimum-scale=1 最小縮放比例為1
user-scalable=no 不允許用戶縮放

 

 

 

9，在main.js 中 import './config/rem' 意為整個項目采用rem響應式布局

　　在src目錄下創建 config文件夾 及在其下面創建 rem.js文件，內容為：

(function(){function a(){var b=document.documentElement.clientWidth;b=b>750?750:b;var c=b/750*100;document.getElementsByTagName("html")[0].style.fontSize=c+"px"}a();window.onresize=a})();

　　以上內容可以百度，類型很多，都是大同小異。

 

9，安裝 px2rem-loader 插件：自定將px單位 轉化為rem單位。

　　如想保持 px單位： width:20px; /*no*/  如此即可不進行轉換

　　安裝：cnpm install px2rem-loader

 

 

10，在項目下面的 build/config/utils.js中找到函數：generateLoaders  進行 配置 px2rem-loader 

　　配置完成需要重啟項目：cnpm run dev

//loader: 'px2rem-loader', 這里千萬別寫成：'px2remLoader' 否則直接報錯：can`t get等等錯誤。

var px2remLoader = { loader: 'px2rem-loader', options:{ remUnit: 50 } }
  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
...
}

 

　

 

11，在header組件中index.vue進行樣式編寫

height:400px; /*no*/  后面有注釋/*no*/的單位默認不會被轉化為rem。進入開發者工具進行查看

width:200px;  安裝完px2rem-loader插件重啟后，所有的px單位都會被轉化為 rem單位。進入開發者工具進行查看

<style scoped>  /* scoped表示當前樣式只用於當前的組件，不影響其他頁面 */

頁面其他內容就是根據設計圖繼續設計完成即可。

<template>
	<div class="c-header">
		<ul class="header-ul">
			<li>推薦</li>
			<li>課程</li>
			<li>實戰</li>
			<li>職業路徑</li>
			<li class="header-search">
				<img src="src../../assets/search.png" >
			</li>
			<li class="header-search">
				<img src="src../../assets/history.png" >
			</li>
		</ul>
	</div>
</template>
<style scoped>  /* scoped表示當前樣式只用於當前的組件，不影響其他頁面 */
	.c-header{
		width: 300px;
		background: #f0f;
		height:400px; /*no*/
	}
</style>