Vue2開發大全

參考資料：

vuex	element	qs.js	axios.js
vue	promise	關於ES6的Promise的使用深刻理解	vue2 設置網頁title的問題
Mint UI	webstorm2017激活	深刻理解vue中的slot與slot-scope	Handling Static Assets
vuex最簡單、最詳細的入門文檔	vue從入門到進階：自定義指令directive

 

開發環境：win10 64bit

開發工具：webstorm

node.js

npm: node.js下的包管理器。

webpack: 它主要的用途是經過CommonJS的語法把全部瀏覽器端須要發佈的靜態資源作相應的準備，好比資源的合併和打包。

vue-cli: 用戶生成Vue工程模板。

安裝node.js

本書使用的node版本：node-v8.11.2-x64

下載地址：https://github.com/zouyujie/software-package

固然，你也能夠去官網下載最新版的node.js，官網地址：https://nodejs.org/en/，須要注意的是下載左邊的穩定版。

雙擊，進行安裝以後，在CMD命令窗體中進行查看。

C:\windows\system32>node -v
v8.11.2

node.js中自帶了npm，咱們再查看下npm，

C:\windows\system32>npm -v
5.6.0

npm安裝vue.js

命令：npm install vue -g

這裏的-g是指安裝到global全局目錄去。

查看版本：

C:\windows\system32>vue -V
2.9.3

 假設我要在E盤的app_codes文件夾下面新建項目，那麼咱們能夠使用CMD跳轉到這個目錄，而後執行：vue init webpack vue-mui

 接下來不斷的按回車，以下圖所示：

最後稍等必定的時間，運行結果以下：

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

npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!

> uglifyjs-webpack-plugin@0.4.6 postinstall E:\app_codes\vue-mui\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

vue-mui@1.0.0 E:\app_codes\vue-mui
+-- autoprefixer@7.2.6
| +-- browserslist@2.11.3
...

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.2 (node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none was installed. # Project initialization finished! # ======================== To get started: cd vue-mui npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack E:\app_codes>vue-cil是vue的腳手架工具。其模板能夠經過 vuejs-templates 來查看。 'vue-cil是vue的腳手架工具。其模板能夠經過' 不是內部或外部命令，也不是可運行的程序 或批處理文件。 E:\app_codes> E:\app_codes>咱們首先，須要安裝vue-cil。命令以下： '咱們首先，須要安裝vue-cil。命令以下：' 不是內部或外部命令，也不是可運行的程序 或批處理文件。

出現上述提示，是由於咱們沒有先安裝vue-cli，接下來，咱們安裝vue-cli

安裝vue-cli

npm install vue-cli -g

說明：安裝vue腳手架

vue-cil是vue的腳手架工具。其模板能夠經過 vuejs-templates 來查看。

 此時，咱們已經利用模板新建好了項目，咱們去E:\app_codes\vue-mui中能夠看到以下所示：

用webstorm打開這個項目，而後運行npm run dev

如上圖所示表示運行成功，而後瀏覽器中輸入地址：http://localhost:8080，會看到以下結果：

安裝vuex

npm install vuex --save

安裝axios

npm install axios –save

安裝mockjs

npm install mockjs --save-dev

安裝element-ui

npm i element-ui -S

實例

如何設置固定的背景圖像：

body
  {
  background-image: url(bgimage.gif);
  background-attachment: fixed;
  }

vue2 設置網頁title的問題：

http://www.javashuo.com/article/p-geokyiwv-co.html

vue2.0 資源文件assets和static的區別：http://www.javashuo.com/article/p-ffgooori-bw.html

C:\windows\system32>e:
E:\>cd E:\MyWorkSpace\vueCodes
E:\MyWorkSpace\vueCodes>

繼續運行：vue init webpack vue-mui。

運行完成後，會出現以下提示：

added 1132 packages in 95.618s

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

To get started:

  cd vue-mui
  npm run dev

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

Promise兼容IE瀏覽器

vue中使用的axios中用到了Promise對象，可這個對象不支持任意IE瀏覽器，這意味着全部IE瀏覽器都不支持接口調用。

 

解決方案：

npm install es6-promise --save

而後main.js最上面添加代碼：

import 'es6-promise/auto'
import "babel-polyfill";

 用 vue-route 的 beforeEach 實現導航守衛（路由跳轉前驗證登陸）

持續更新...