vue的准備工作

1.檢查是否已經安裝了node和npm,確定node的版本是4.0以上

 

　　在命令窗口（windoes + R 鍵打開輸入cmd確認）輸入node -v 和npm -v,如果顯示出版本號，說明安裝成功

 

node -v

2.安裝淘寶鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

如果安裝失敗，可以使用 npm cache clean清理緩存，然后再重新安裝。

 

輸入cnpm -v 查看是否安裝成功，輸入cnpm install -g vue-cli 安裝vue-cli和webpack )

 

完成后輸入vue -V(V大寫)查看是否安裝成功

 

若提示無法識別vue，可輸入npm install -g npm 更新npm 版本

 

3.vue腳手架的安裝

cnpm install -g vue-cli

4.查看可以安裝哪些模板

vue list

5.根據模板初始化項目

vue init <template-name> <project-name>

eg: vue init webpack sell

6.安裝相關依賴代碼包

cnmp install

7.啟動項目

npm run dev

 

8、vue項目的打包

大家都知道使用npm run build進行打包，這個時候你直接打開dist/下的index.html,會發現文件可以打開，但是所有的js，css，img等路徑有問題是指向根目錄的，

 此時需要修改config/index.js里的assetsPublicPath的字段，初始項目是/他是指向項目根目錄的也是為什么會出現錯誤，這時改為./

注意：當路由使用mode:'history'模式，后端配置了路由去掉#時，不能使用以上行為，否則會導致除了根目錄，其他地址無法訪問！

 

HTML5 History 模式

vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新加載。

如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面。

const router = new VueRouter({ mode: 'history', routes: [...] })

當你使用 history 模式時，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不過這種模式要玩好，還需要后台配置支持。因為我們的應用是個單頁客戶端應用，如果后台沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就不好看了。

所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。

#后端配置例子

#Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

除了 mod_rewrite，你也可以使用 FallbackResource。

#nginx

location / { try_files $uri $uri/ /index.html; }

#原生 Node.js

const http = require('http') const fs = require('fs') const httpPort = 80 http.createServer((req, res) => { fs.readFile('index.htm', 'utf-8', (err, content) => { if (err) { console.log('We cannot open "index.htm" file.') } res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }) res.end(content) }) }).listen(httpPort, () => { console.log('Server listening on: http://localhost:%s', httpPort) })

#基於 Node.js 的 Express

對於 Node.js/Express，請考慮使用 connect-history-api-fallback 中間件。

#Internet Information Services (IIS)

1. 安裝 IIS UrlRewrite
2. 在你的網站根目錄中創建一個 web.config 文件，內容如下：

<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="Handle History Mode and custom 404/500" stopProcessing="true"> <match url="(.*)" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> </rules> </rewrite> </system.webServer> </configuration>

#Caddy

rewrite {
    regexp .*
    to {path} /
}

#Firebase 主機

在你的 firebase.json 中加入：

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

#警告

給個警告，因為這么做以后，你的服務器就不再返回 404 錯誤頁面，因為對於所有路徑都會返回 index.html 文件。為了避免這種情況，你應該在 Vue 應用里面覆蓋所有的路由情況，然后在給出一個 404 頁面。

const router = new VueRouter({ mode: 'history', routes: [ { path: '*', component: NotFoundComponent } ] })

或者，如果你使用 Node.js 服務器，你可以用服務端路由匹配到來的 URL，並在沒有匹配到路由的時候返回 404，以實現回退。更多詳情請查閱 Vue 服務端渲染文檔。

 

2、css中引用的圖片資源找不到

我的login.vue文件中有一段css，其中引用了一個背景圖片，是這樣寫的

1	.login{ height : 100% ; background :  url ( "../assets/login_bg.jpg" )  no-repeat ; background- size : cover; color :  white ;}

“src/assets/”文件夾下有這張圖片，打包后路徑發生變化這個圖片就找不到了，stackflow上有一個解決辦法，很簡單

打開“build/utils.js”，增加一行代碼即可

 

 

1.下載lib-flexible

我使用的是vue-cli+webpack，所以是通過npm來安裝的

cnpm i lib-flexible --save

2.引入lib-flexible

在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3.設置meta標簽

通過meta標簽，設置設備寬度以及縮放比例

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4.安裝px2rem-loader

cnpm install px2rem-loader --save-dev

5.配置px2rem-loader

這里是重要的一步~~

在build文件中找到util.js，將px2rem-loader添加到cssLoaders中，如：

const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

同時，在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader,px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

6.重啟，一切ok~

當配置完之后，只需要重啟下服務，就自動轉化為rem了

npm run dev

 

npm安裝stylus和stylus-loader

cnpm install stylus-loader –save-dev

 

然后改了一下webpack的配置
在webpack.base.conf.js的module的loaders里加入了

{ 
  test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' }

在resolve的extensions里加入了.styl

extensions: ['', '.js', '.vue','.styl'][以上代碼不需要！！！！]

項目創建報錯：

This dependency was not found:

* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1d57e5ea","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vue in ./src/components/a.vue

To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1d57e5ea","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vue

解決方案：

npm install stylus-loader css-loader style-loader --save-dev

安裝之后還會報錯：

Module build failed: Error: Cannot find module 'stylus'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (E:\project\selling\node_modules\stylus-loader\index.js:2:14)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)

繼續執行：

npm install stylus

然后執行 npm run dev 

解決

因此在首次初始化的時候需要進行如下步驟的安裝

1.cnpm install stylus --save-dev

2.cnpm install stylus-loader --save-dev

3.cnpm run dev（每次改動了配置文件均需要重新啟動項目）

Vue 2.0 + cordova 構建Android應用（一）

• vue.js
 
• cordova

一、環境准備（Windows、Android）

1、官方安裝參考

包括Java、Android SDK 及相關環境變量配置

2、Node.js

安裝Node.js（主要是為了使用npm安裝cordova、vue），當前選擇穩定版6.9.x LTS 即可 

3、Android SDK

建議直接下載安裝Android Studio，當前版本2.2.2.0 

選擇包含 Android SDK 的安裝包，安裝完畢后打開SDK配置路徑中的SDK Manager.exe，下載所需版本Android SDK Tool和對應SDK Platform，建議真機開發調試。

下載速度慢或無法下載，則使用代理，配置如下，或可使用其他代理路徑

4、Cordova

參照官方指南首頁，安裝Cordova、配置已下載的SDK環境變量，並按照指南進行初步測試

cordova 相關命令參考：http://cordova.apache.org/doc...

注意命令中的各種默認設置

假設構建名為cordovaApp的項目

cordova create cordova-app com.lxlazy.www.app cordovaApp 
cd cordova-app 
cordova platforms add android

命令行提示項目中已默認安裝 cordova-plugin-whitelist 插件。

檢查整體環境是否正確，注意查看提示

cordova requirements

建議使用真機調試，記得打開USB調試模式

cordova run

---

注意：首次使用時，命令行提示 Downloading https://services.gradle.org/distributions/gradle-2.14.1-all.zip，是在下載對應的gradle並自動解壓安裝，根據網絡狀況，可能耗時極長，且容易報錯。

windows環境下，在命令行窗口下載安裝時，點擊窗口內部，會使其暫停下載工作，有下載進度提示的時候才可以看出來。按下Esc鍵就能繼續工作。坑我好幾次。當然也可使用VSCode控制台代替。

也可使用以下方法：找到如 cordova-app/platforms/android/cordova/lib/buildersGradleBuilder.js，其中有

var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] ||'https\\://services.gradle.org/distributions/gradle-2.14.1-all.zip' 

根據路徑，使用迅雷等工具下載對應安裝包，並修改上述語句中的外鏈為已下載好的路徑，如，將gradle-2.14.1-all.zip放在了D盤根路徑，則修改為

var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || 'file:///gradle-2.14.1-all.zip'; 

然后重新運行cordova build 或 cordova run

缺點是每新建一個工程就得改一遍，當然速度快多了

---

5、Vue.js

參照官方指南，使用官方腳手架 vue-cli 初步構建項目：http://vuejs.org/v2/guide/ins...

該項目將與之前的cordovaApp項目整合，假設為vueApp（默認使用vue-router、標准ESLint，不用測試模塊，因為並不復雜）

vue init webpack vue-app
cd vue-app
cnpm install

只在下載包時使用cnpm命令加快下載速度，其他情況最好使用npm或 yarn（然而官網太難進），否則可能出現各種問題……

npm run dev

注意界面上的各種地址

6、Visual Studio Code

沒什么好說的，相比 sublime text 而言，插件化定制等功能更加方面好用，而且免費 

---

二、項目整合

即：將vue-app項目默認的構建位置dist目錄修改為cordova-app項目中的www目錄，並能夠使用cordova命令直接運行在手機端

1、構建

給出vue項目構建需要修改的地方，如圖所示

修改后，npm run build 會將工程打包到與 app-vue 項目同級的 app-cordova 項目下

└── www
    ├── css
    ├── fonts
    ├── img ├── js └── index.html

不知道為什么之前這樣是報錯的，需要把img文件夾移動到css文件夾下，后來莫名其妙就好了……

2、vue 本地調試

至少在index.html中添加

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 

在瀏覽器運行后，打開控制台，切換成設備視圖，跟普通html界面一樣調試，開發模式下，可使用vue-devtools瀏覽器拓展插件獲取有效界面信息。如圖

3、Cordova 本機調試

將構建好的項目運行在手機端，USB連接手機，打開調試模式

注意：一切正常但還是安裝出錯，1、卸載之前的app；2、確認允許cordova安裝。我沒遇到過其他的了

打開 Chrome 瀏覽器，輸入地址chrome://inspect，默認進入 chrome://inspect/#devices，將在頁面顯示當前可用設備，點擊鏈接彈出控制台界面，然后跟普通頁面一樣調試

 
更多vue問題可以訪問：https://segmentfault.com/a/1190000010191885

眾所周知，iphoneX的面部識別功能很強大。但是在瀏覽器屏幕顯示上，在觀看上不會引起問題，但是在默認情況下會有一些顯示問題。

1、因為正常情況下會有上下兩個白色的邊框，如果網頁背景色不是白色或者其他單色的顏色會顯得非常突兀，

解決方式：給body標簽加上background-color，背景色為網頁顏色。

2、如果你喜歡對設計有額外的控制，或者使用漸變或圖像作為背景，那么設置背景顏色可能是不可行的。在蘋果的iOS的最新版本增加了viewport-fit，全屏幕顯示網頁，在meta標簽把viewport設定為

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

3、設置safe-srea-inset-*確保安全邊界：

因為橫屏時畫面右側會被那一塊感應器給擋住，而Home Bar等空間由於保留給系統使用，鏈接也會失效，會造成體驗不良的狀況。Apple提供了幾個CSSProperties來處理：

constant(safe-area-inset-top)

constant(safe-area-inset-right)

constant(safe-area-inset-bottom)

constant(safe-area-inset-left)

在設置viewport-fit后使用這幾個css屬性：

.container {
    padding-top: constant(safe-area-inset-top);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
}

就可以修正全屏時內容與系統保留區重疊的問題。

谷歌插件jsonview

 

git clone https://xxxxxxx 

git config --global user.name '你的git用戶名'

git config --global user.email '你的git email'

 

git add .

git commit -m 'change'

git push

git checkout master

git merge origin/index-swiper

git push

 

git push

git checkout index-icons