【前端】vue.js環境配置以及實例運行簡明教程

来源:http://www.cnblogs.com/dragonir/archive/2017/09/02/7465386.html
-Advertisement-
Play Games

vue.js環境配置以及實例運行簡明教程 聲明：本文檔編寫參考如下兩篇博客，是對它們的修改與補充，歡迎點擊鏈接查看原文： 原文1：vue.js在windows本地下搭建環境和創建項目 原文2：Vue.js開發環境搭建 原文1：vue.js在windows本地下搭建環境和創建項目 原文2：Vue.js ...


vue.js環境配置以及實例運行簡明教程

 

聲明：本文檔編寫參考如下兩篇博客，是對它們的修改與補充，歡迎點擊鏈接查看原文：

 

VUE.JS簡介

 

何為Vue.js

  • 　　Vue.js（讀音 /vjuː/, 類似於 view）是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關註視圖層，並且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。
  • 　　Vue.js 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
  • 　　Vue.js是一個MVVM模式的框架，如果讀者有angular經驗，一定能夠很快入門Vue的
  • 　　vue.js的作者是中國人，吸收了google的angular.js和facebook的react.js的特性，摒棄了jquery傳統的DOM操作，採用數據綁定和指令等概念，可以說是未來WEB端開發的趨勢。

 

vue.js的特點

  • 易用： 已經會了HTML,CSS,JavaScript？即刻閱讀指南即可開始構建應用！
  • 靈活： 簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。
  • 高效： 16kb min+gzip 的運行大小,超快虛擬 DOM ,最省心的優化

 

 

VUE.JS 環境搭建

vue.js推薦開發環境

  • Node.js: javascript運行環境(runtime),不同系統直接運行各種編程語言
  • npm: Nodejs下的包管理器
  • webpack: 它主要的用途是通過 CommonJS 的語法把所有瀏覽器端需要發佈的靜態資源做相應的準備，比如資源的合併和打包。
  • vue-cli: 用戶生成Vue工程模板

 

vue.js安裝

1. 安裝node.js

　　到官網下載node.js安裝包，安裝過程和一般軟體沒有區別。安裝完成後到終端查看版本號，若如下圖所示，表示安裝成功。

 node.js環境變數新建

 　　其實安裝完node，就自動在path里增加環境變數，但是為了以後的本地部署項目，我們需要找到node.js的安裝根目錄，在當中新建“node_global”和"node_cache"兩個文件夾。

a. 啟動CMD依次執行以下兩條命令

npm config set prefix "F:\set-soft\nodejs\node_global"
npm config set cache "F:\set-soft\nodejs\node_cache"

b. 設置環境變數：

NODE_PATH = F:\set-soft\Node\nodejs
PATH = %NODE_PATH%\;%NODE_PATH%\node_modules;%NODE_PATH%\node_global;

這樣就可以把後面全局安裝的裝到global里並且可以直接用命令使用。

 

2. 安裝webpack

npm install webpack -g

 

3. 安裝vue腳手架

npm install vue-cli -g

 

 

新建vue.js項目

 

新建項目文件夾，終端進入該目錄

　　新建的話，可以在當前系統盤下直接新建，也可以切換盤符，然後在當前的磁碟里新建文件項目，如下示例

cd 目錄路徑

 

根據模板創建項目

vue init webpack-simple 工程名字<工程名字不能用中文>或者創建 vue1.0 的項目vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

命令 vue init webpack vue_project(最後這個是創建的項目文件夾的名字)

 

工程目錄如圖

　　初始化完成，就到當前的磁碟里找到你的項目文件夾，裡面使用了腳手架vue-cli的和webpack提供的模板進行了創建。目錄結構大概如下所示

 

安裝項目依賴

　　安裝 vue 路由模塊vue-router和網路請求模塊vue-resource，進入該項目執行：

npm install vue-router vue-resource --save　

啟動項目

npm run dev

 

訪問: http://localhost:8080/ 運行成功 

 

運行下載的Vue demo

 

下載demo，並解壓到運行文件中 

　　可以從github克隆下來，然後將項目文件夾放到某個文件中，在終端進入該文件目錄，比如 : 

f:\cd domo_vue

 

在本地安裝 

npm install  //可使用縮寫 npm i

 

運行 

npm run dev      //回車，會自動彈出瀏覽器視窗，預設地址為 http://localhost:8080

　 

伺服器端運行 

 npm run build

　　會生成靜態文件，在根目錄的dist里，裡面有個index.html，這是伺服器訪問的路徑指定到這裡就可以訪問我們自己的項目了。但是我發現個問題就是生成index.html里引用的css和js的引用路徑不對，這時候就需要自己修改一下配置了。

進入config/index.js，修改配置，搭建完成。如下圖示例：

 

 

 

附錄

淘寶的npm鏡像安裝方法

輸入如下指令安裝npm鏡像：

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

　　以後再用到npm的地方直接用cnpm來代替就好了因為npm在國內下載速度是很慢，推薦使用cnpm。

 

運行報錯處理

運行就報錯 

'NODE_ENV' 不是內部或外部命令，也不是可運行的程式或批處理文件。npm ERR! Windows_NT 6.1.7601npm 
ERR! argv "D:\\nodejs\\node.exe" "D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"npm 
ERR! node v4.0.0-rc.5npm 
ERR! npm v2.14.2npm 
ERR! code ELIFECYCLEnpm 
ERR! [email protected] start: `npm run clear&& NODE_ENV=development && webpack-dev-server --host 0.0.0.0 --devtool eval --progress --color --profile`npm 
ERR! Exit status 1npm ERR!npm 
ERR! Failed at the [email protected] start script 'npm run clear&& NODE_ENV=development && webpack-dev-server --host0.0.0.0 --devtool eval --progress --color --profile'.npm 
ERR! This is most likely a problem with the yy-ydh-web package,npm 
ERR! not with npm itself.npm 
ERR! Tell the author that this fails on your system:npm 
ERR! npm run clear&& NODE_ENV=development && webpack-dev-server --host 0.0.0.0 --devtool eval --progress --color --profilenpm 
ERR! You can get their info via:npm 
ERR! npm owner ls yy-ydh-webnpm ERR! There is likely additional logging output above.npm 
ERR! Please include the following file with any support request:npm 
ERR! D:\workspace\node_modules\yy-ydh-web\npm-debug.log

 原因

  • 這是windows不支持NODE_ENV=development的設置方式 

解決

  • 安裝across-env: npm install cross-env --save-dev
  • 在NODE_ENV=xxxxxxx前面添加cross-env就可以了。

 

運行還是報錯

module.js:457 throw err; ^Error: Cannot find module 'webpack' at Function.Module._resolveFilename (module.js:455:15) 
at Function.Module._load (module.js:403:25) 
at Module.require (module.js:483:17) 
at require (internal/module.js:20:19) 
at Object.<anonymous> (D:\vue_work\fendo\webpack.config.js:2:15) 
at Module._compile (module.js:556:32) 
at Object.Module._extensions..js (module.js:565:10) 
at Module.load (module.js:473:32) 
at tryModuleLoad (module.js:432:12) 
at Function.Module._load (module.js:424:3)

原因

  • 找不到webpack這個模塊

解決

  • 安裝該模塊:
  • ccnpm install 模塊名 --save-dev(關於環境的，表現為npm run dev 啟動不了)
cnpm install 模塊名 --save(關於項目的，比如main.js，
表現為npm run dev 成功之後控制台報錯)
比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list

 

安裝好後運行又報這個模塊的錯:

Error: Cannot find module 'bl' at Function.Module._resolveFilename (module.js:455:15) 
at Function.Module._load (module.js:403:25) 
at Module.require (module.js:483:17) 
at require (internal/module.js:20:19) 
at Object.<anonymous> (C:\Users\fendo\AppData\Roaming\npm\node_modules\npm\node_modules\request\request.js:9:10) 
at Module._compile (module.js:556:32) 
at Object.Module._extensions..js (module.js:565:10) 
at Module.load (module.js:473:32) 
at tryModuleLoad (module.js:432:12) 
at Function.Module._load (module.js:424:3)

 

 解決方法

cnpm install bl --save-dev
npm run dev


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

-Advertisement-
Play Games
更多相關文章
  • html 中input標簽的name屬性
    Name: Email: 定義和用法 name 屬性規定 input 元素的名稱。 name 屬性用於對提交到伺服器後的表單數據進行標識，或者在客戶端通過 JavaScript 引用表單數據。 註釋：只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值 如上面的例子：在後端他有個對象存在... ...
  • Fetch怎麼與後端互通Cookie
    fetch方法要想於後臺專遞cookie必須添加屬性 註意：這個屬性不是設置在headers里的 後臺也必須設置一個header來配合 ...
  • 利用easyui來顯示一個table
    1 在使用easyui之前必須要導入壓縮好的完整的easy-ui的js包。 2 其次要在html頁面中引入 具體操作如下： Basic Panel - jQuery EasyUI Demo 3 準備數據，把要表示成為table的對象在資料庫中建立一個表。最好是資料庫中的列的名稱與對象屬性同名。 這樣... ...
  • jacascript DOM變動事件
    前言：這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！ DOM變動事件 變動事件（MutationEvent）能在DOM中的某一部分發生變化時給出提示，這類事件非常有用，但都只能使用 DOM2 級事件處理程式，且由於瀏覽器相容性不好，所以用的不廣泛； 刪除節點變 ...
  • [js高手之路] 我的開源javascript框架gdom - 選擇器用法
    gdom框架是我開發的一款dom和字元串處理框架，目前版本是1.0.0. 使用方法跟jquery是差不多的, 會用jquery就會用gdom，目前 1.0.0版本的選擇器完全支持CSS3選擇器.沒有做IE的低版本相容。 gdom下載地址：https://github.com/ghostwu/gdom ...
  • Sublime Text3自定義代碼片段
    1.打開工具--插件開發--新建代碼片段 會出現下圖： 2.在<![CDATA[和]]>內寫下你要的代碼片段,註意的是代碼片段要靠最左邊。 3.設置快捷鍵，把下麵tabTrigger標簽的註釋打開，中間的h就是你的快捷鍵。 4.Ctrl+s保存。名字隨便起，但是尾碼名必須是.sublime-snip ...
  • 優雅的H5下拉刷新【minirefresh】
    序 嚴格的來說，這是我第一個完全投入的開源項目，它的出現是為了統一移動H5中的下拉刷新，想通過一套框架，多主題拓展方式，適應於任意需求下的任意下拉刷新場景。 另外，這個項目作為獨立項目存在，希望能有更多的人參與進來！ " " "【minirefresh】優雅的H5下拉刷新。零依賴，高性能，多主題，易 ...
  • git常見操作---由簡入深
    常用命令 git速度快，分散式， 回到過去，未來，版本 使用git會在當前目錄下，產生一個.git文件，記錄 多端共用 團隊協作 衝突需要手動解決 svn和git對比 svn叫集中式，集中存放，有一個中央伺服器，如果中央伺服器報廢，所有的文件將癱瘓 每個文件夾裡面都有.svn文件，速度慢 git叫分 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類