vue腳手架搭建移動端項目--flexible.js

經過命令行 node -v 查看是否安裝node環境

在 nodejs 和 webpack已安裝的前提下，隨便一個文件夾下，輸入命令行

npm install vue-cli -g

安裝完成後，經過 vue -V 查看版本號驗證是否安裝成功

經過vue-cli 初始化vue項目

輸入命令行新建 vue-demo 項目

vue init webpack vue-demo(項目名)

而後就能夠一路回車鍵了

$ vue init webpack vue-demo

? Project name (vue-demo)
? Project name vue-demo
? Project description (A Vue.js project)
? Project description A Vue.js project
? Author (xxx <xxx@123.com>)
? Author xxx<xxx@123.com>
? Vue build standalone
? Install vue-router? (Y/n) y
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n //是否使用ESLint管理代碼
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) n
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

   vue-cli · Generated "vue-demo".


# Installing project dependencies ...
# ========================

ESLint的用途：

• 1.審查代碼是否符合編碼規範和統一的代碼風格；
• 2.審查代碼是否存在語法錯誤；

在項目中使用 ESLint 老是會報各類錯誤，因此開發的時候我通常是不開啓的

安裝完成後，會顯示

# Project initialization finished!
# ========================

To get started:

  cd vue-demo
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

這時若是直接運行 npm run dev 會報錯，須要再安裝項目依賴

進入到 vue-demo 文件夾下，執行命令行

cd vue-demo
npm install(或者是cnpm install)

執行完成後，在 vue-demo 文件夾下新增 node_modules 文件

啓動服務，執行命令行

$ npm run dev

> vue-demo@1.0.0 dev E:\mytest\vuetest\vue-demo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting DONE  Compiled successfully in 3868ms15:24:20

 I  Your application is running here: http://localhost:8081

在瀏覽器中輸入 localhost:8081 訪問頁面，若是想要自動啓動瀏覽器頁面，須要在 config/index.js文件中修改相關配置

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: true,//是否自動啓動瀏覽器
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

修改autoOpenBrowser：true,

Ctrl+C 退出服務後再啓動 npm run dev 就能夠自動打開網頁

 

運行流程：

 

補充一點:添加 favicon.ico 圖標
https://blog.csdn.net/guzhao593/article/details/93972303

標籤頁圖標favicon報錯問題
1.修改配置 build/webpack.dev.conf.js

var path = require('path')
module.exports = merge(baseWebpackConfig, {
 plugins: [ 
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: 'index.html',
       inject: true,
       favicon: 'favicon.ico' // 增長
     }),
  ]
})

2.favicon.ico 存放根目錄

3.index.html引入路徑

<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">

 

適配移動端flexible.js

適用於最新版vue-cli,配置手淘的lib-flexible.js和rem實現移動端頁面自適應

1.安裝lib-flexible.js

npm install lib-flexible --save

2.在項目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

3.px轉換rem

使用 webpack 的 px2rem-loader,自動將px轉換爲rem 
安裝px2rem-loader

npm install px2rem-loader --save-dev

4.配置px2rem-loader

首先找到 build/utils.js文件，在utils.js中添加以下配置

找到generateLoaders方法，在函數裏以下配置 

這裏最重要的就是要在上圖兩個位置都要加上px2remLoader，否則不會起做用！！！

5.px2rem 用法

安裝px2rem後，再使用px上有些不一樣，你們能夠參考px2rem官方介紹，下面簡單介紹一下。

• 直接寫px，編譯後會直接轉化成rem —- 除開下面兩種狀況，其餘長度用這個
• 在px後面添加/no/，不會轉化px，會原樣輸出。 — 通常border需用這個
• 在px後面添加/px/,會根據dpr的不一樣，生成三套代碼。—- 通常字體需用這個

示例代碼 
編譯前（本身寫的代碼）

.example{
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}

編譯後

.example{
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}

這樣基本配置就完成了，重啓項目就可使用lib-flexible+rem編寫移動端頁面了

注意：vue移動端 border 或分割線中的 1px 不但願被轉成 rem，只要再後面寫上註釋 /*no*/ 就能夠了

 參見：http://www.javashuo.com/article/p-btysddci-ct.html

 

npm相關

• npm -v：查看 npm 版本。
• npm list：查看當前目錄下都安裝了哪些 npm 包。
• npm info 模塊：查看該模塊的版本及內容。
• npm i 模塊@版本號：安裝該模塊的指定版本。

 在平時使用 npm 安裝包的過程當中，你可能須要知道一些 npm 基本知識：

• i/install：安裝。使用 install 或者它的簡寫 i，都代表你想要下載這個包。
• uninstall：卸載。若是你發現這個模塊你已經不使用了，那麼能夠經過 uninstall 卸載它。
• g：全局安裝。代表這個包將安裝到你的計算機中，你能夠在計算機任何一個位置使用它。
• --save/-S：經過該種方式安裝的包的名稱及版本號會出如今 package.json 中的 dependencies 中。dependencies 是須要發佈在生成環境的。例如：ElementUI 是部署後還須要的，因此經過 -S 形式來安裝。
• --save-dev/-D：經過該種方式安裝的包的名稱及版本號會出如今 package.json 中的 devDependencies 中。devDependencies 只在開發環境使用。例如：gulp 只是用來壓縮代碼、打包的工具，程序運行時並不須要，因此經過 -D 形式來安裝。