Vue2開發大全

来源:https://www.cnblogs.com/jiekzou/archive/2018/08/24/9493228.html
-Advertisement-
Play Games

參考資料: 開發環境:win10 64bit 開發工具:webstorm node.js npm: node.js下的包管理器。 webpack: 它主要的用途是通過CommonJS的語法把所有瀏覽器端需要發佈的靜態資源做相應的準備,比如資源的合併和打包。 vue-cli: 用戶生成Vue工程模板。 ...


參考資料:

vuex element qs.js axios.js
vue promise 關於ES6的Promise的使用深入理解  vue2 設置網頁title的問題
Mint UI  webstorm2017激活  深入理解vue中的slot與slot-scope  Handling Static Assets

 

開發環境: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!

> [email protected] 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
+-- [email protected]
| +-- [email protected]
...
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 [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN [email protected] 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的問題:

https://www.cnblogs.com/jshare/p/7421670.html

vue2.0 資源文件assets和static的區別:https://www.cnblogs.com/minigrasshopper/p/8011630.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 實現導航守衛(路由跳轉前驗證登錄)

持續更新...


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 測試環境:Idea+Windows10 準備工作: <1>、打開本地 C:\Windows\System32\drivers\etc(系統預設)下名為hosts的系統文件,如果提示當前用戶沒有許可權打開文件;第一種方法是將hosts文件拖到桌面進行配置後再拖回原處;第二種一勞永逸的方法是修改當前用戶對 ...
  • 文章來源:公眾號-智能化IT系統。 貝葉斯的原理類似於概率反轉,通過先驗概率推導出後驗概率。其公式如下: 在大數據分析中,該定理可以很好的做推導預測,很多電商以及用戶取向可以參照此方式,從已有數據推導出未知數據,以歸類做後續操作。 例如,在一個購房機構的網站,已有8個客戶,信息如下: 這時來了一個新 ...
  • 幫助類: using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Text; using System.Threading.Tasks; using MySq... ...
  • 1.前言 react-natvie中文網地址:https://reactnative.cn/ 現在前端的開發環境基本都需要先搭建環境.react-natvie環境搭建跟著官網的文檔流程走就行了。但是有些是沒有必要的。 2.搭建環境 2.1選擇平臺 這裡需要註意的就是windows的電腦只能開發and ...
  • 首先,為什麼我們要定義一個新類呢?按照我的理解,就是為了抽象出來一個新的東西(也就是類),用來存儲更多的數據變數和方法,一切類都直接或間接繼承與NSObject。 在類的頭文件里我們可以定義成員變數、屬性變數、和方法,在方法里又分為實例方法和類方法。 1.成員變數 成員變數可以以三個關鍵詞來修飾,即 ...
  • 程式中資料庫文件路徑在/data/data/<package name>/databases/ adb shell 進入adb命令行 ls 列出當前文件夾下所有文件 假設有一個名為angle.db的資料庫 下麵通過這個資料庫說明資料庫的操作方式 進入資料庫 sqlite3 angle.db 查看所有 ...
  • 解決方案類似: Android項目實戰(四十):Andoird 7.0+ 安裝APK適配 解決方法: 一、在AndroidManifest.xml 文件中添加 四大組件之一的 <provider> 註意這裡的 android :authorities 屬性的值 中的 com.xxx.xxxx 是你的 ...
  • 歡迎大家前往 "騰訊雲+社區" ,獲取更多騰訊海量技術實踐乾貨哦~ 本文由 "WeTest質量開放平臺團隊 " 發表於 "雲+社區專欄" 一款app除了要有令人驚嘆的功能和令人髮指交互之外,在性能上也應該追求絲滑的要求,這樣才能更好地提高用戶體驗。 以下是本人在工作中對經歷過的性能優化的一些總結,依 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...