1. 程式人生 > >npm的安裝及Vue.js2.0從入門到放棄---入門例項(一)

npm的安裝及Vue.js2.0從入門到放棄---入門例項(一)

下載地址:

http://nodejs.cn/download/ 

https://nodejs.org/en/download/  

兩者都可以

安裝node.js

node.js官網下載並安裝node,安裝過程很簡單,一路“下一步”就可以了(傻瓜式安裝)。安裝完成之後,開啟命令列工具,輸入 node -v,如下圖,如果出現相應的版本號,則說明安裝成功。


npm包管理器,是整合在node中的,所以,直接輸入 npm -v就會如下圖所示,顯示出npm的版本資訊。


OK!node環境已經安裝完成,npm包管理器也有了。由於有些npm有些資源被遮蔽或者是國外資源的原因,經常會導致用npm安裝依賴包的時候失敗,所有我還需要npm的國內映象---cnpm。


安裝cnpm

在命令列中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然後等待,安裝完成如下圖。

完成之後,我們就可以用cnpm代替npm來安裝依賴包了。如果想進一步瞭解cnpm的,檢視淘寶npm映象官網

安裝vue-cli腳手架構建工具

在命令列中執行命令 npm install -g vue-cli 然後等待安裝完成。
在doc 的cmd 下 執行 : npm install -g vue-cli
安裝成功,就可以執行 vue 命令
vue --version 檢視vue cli 的版本
通過以上三部,我們需要準備的環境和工具都準備好了,接下來就開始使用vue-cli來構建專案。

用vue-cli構建專案

要建立專案,首先我們要選定目錄,然後再命令列中把目錄轉到選定的目錄。在這裡,我選擇桌面來存放新建的專案,則我們需要先把目錄cd到桌面,如下圖。
在桌面目錄下,在命令列中執行命令vue init webpack firstVue 。解釋一下這個命令,這個命令的意思是初始化一個專案,其中webpack是構建工具,也就是整個專案是基於webpack的。其中firstVue是整個專案資料夾的名稱,這個資料夾會自動生成在你指定的目錄中(我的例項中,會在桌面生成該資料夾),如下圖。

#會從網上下載建立一個基於 webpack 模板的新專案
vue init webpack firstVue
 
執行初始化命令的時候回讓使用者輸入幾個基本的選項,如專案名稱,描述,作者等資訊,如果不想填直接回車預設就好。
開啟firstVue資料夾,專案檔案如下所示。
這就是整個專案的目錄結構,其中,我們主要在src目錄中做修改。這個專案現在還只是一個結構框架,整個專案需要的依賴資源都還沒有安裝,如下圖。

安裝專案所需的依賴

要安裝依賴包,首先cd到專案資料夾(firstVue資料夾),然後執行命令 cnpm install ,等待安裝。
或者:#安裝依賴
cd firstVue
npm install 
安裝完成之後,會在我們的專案目錄firstVue資料夾中多出一個node_modules資料夾,這裡邊就是我們專案需要的依賴包資源。

安裝完依賴包之後,就可以執行整個專案了。

執行專案

在專案目錄中,執行命令 npm run dev ,會用熱載入的方式執行我們的應用,熱載入可以讓我們在修改完程式碼後不用手動重新整理瀏覽器就能實時看到修改後的效果。


這裡簡單介紹下 npm run dev 命令,其中的“run”對應的是package.json檔案中,scripts欄位中的dev,也就是 node build/dev-server.js命令的一個快捷方式。專案執行成功後,瀏覽器會自動開啟localhost:8080(如果瀏覽器沒有自動開啟,可以手動輸入)。執行成功後,會看到如下所示的介面。


如果看到這個頁面,那就可以開瓶香檳來慶祝了,恭喜你,專案執行成功了。今天就到這吧,下次給大家分享進一步的小案例,讓大家加深對Vue.js的理解。

如果你覺得我分享的知識對你有幫助的話,那麼你也可以儘自己的綿薄之力


相關推薦

npm安裝Vue.js2.0入門放棄---入門例項

下載地址:http://nodejs.cn/download/ https://nodejs.org/en/download/  兩者都可以安裝node.js從node.js官網下載並安裝node,安裝過程很簡單,一路“下一步”就可以了(傻瓜式安裝)。安裝完成之後,開啟命令列

抓包工具Fiddler下載 、安裝對谷歌瀏覽器進行抓包使用

一、Fiddler的安裝和配置 開啟工具Fiddler,在Tools選項裡面點選options 配置完後,重啟Fiddler 二、谷歌瀏覽器外掛SwitchyOmega的安裝使用 三、使用Fiddler對谷歌瀏覽器進行抓包

vue2.0+vue-router2.0+axios+webpack開發webapp專案

前言:本人第一次將vue運用到實際專案中,將實際開發流程簡單描述下(第一次寫部落格,有問題希望及時提出,討厭噴子。) 一.安裝node環境   首先我們需要安裝node環境,這個想必不用多說,可以直接到中文官網http://nodejs.cn/下載安裝包。其

Scikit-learn快速入門教程和例項

一,什麼是SKlearn SciKit learn的簡稱是SKlearn,是一個python庫,專門用於機器學習的模組。 以下是它的官方網站,文件等資源都可以在裡面找到http://scikit-learn.org/stable/#。

轉-Vue.js2.0入門放棄---入門實例

命令行 今天 初始化 手動 pre ref cnpm 簡單介紹 收藏 http://blog.csdn.net/u013182762/article/details/53021374 標簽: Vue.jsVue.js 2.0Vue.js入門實例Vue.js 2.0教

Vue.js2.0入門放棄---入門例項

已經有幾周沒有更新部落格了,最近自己也在學習就沒有能及時抽身來寫部落格。 今天就來簡單說一下vue-resource,這是vue的一個與伺服器端通訊的HTTP外掛,用來從伺服器端請求資料。話不多說,直接上乾貨吧。 這裡PS一下,有人反映之前的程式碼下載下來,執行會報錯而

postgresql入門到菜鳥通過編譯方式安裝postgresql

最近工作需要用到postgresql資料庫,學習過程中發現網上的資料並不是很多。在這裡把學習的過程以及學習過程中的問題分享出來,希望能對需要剛才開始學習postgresql的人有所幫助。   (一)安裝篇 安裝安裝環境為:rehel虛擬機器。 安裝方式:原始碼安裝。

SpringCloud入門到進階——懂生活就懂微服務

避免 發現 官方文檔 隨著 並發 規範 只需要 組合 組件 內容   本文通過生活中的實際場景解釋單體應用和微服務應用的關系,以及SpringCloud中各組件的功能和含義。 適合人群   Java開發人員 說明   轉載請說明出處:SpringCloud從入門到進階(一)

Vue 2.0學習筆記:事件匯流排EventBus

許多現代JavaScript框架和庫的核心概念是能夠將資料和UI封裝在模組化、可重用的元件中。這對於開發人員可以在開發整個應用程式時避免使用編寫大量重複的程式碼。雖然這樣做非常有用,但也涉及到元件之間的資料通訊。在Vue中同樣有這樣的概念存在。通過前面一段時間的學習,Vue元件資料通訊常常會有父子元

Zygote說到ViewZygote的啟動流程執行機制

前言 計劃寫一個系列文章,從 Zygote 開始,說到 Activity,再到 View 的顯示及事件分發等,意在把 Android 開發中最核心的一些的知識點串成線,看看 Android 是怎麼把它們組織到一起的,希望能寫好。 本文是第一篇,以“Zygote 的啟動流程及執行機制”為題, 將打通“虛擬機

零搭建Hadoop叢集——離線安裝YUM源搭建

概述 Cloudera版本(Cloudera’s Distribution Including Apache Hadoop,簡稱“CDH”),基於Web的使用者管理介面,支援大部分Hadoop元件,包括HDFS、YARN、Hive、 Hbase、Zookeep

RabbitMQ入門常用的5種模式的簡單使用

RabbitMQ是一個非常常用也非常強大的訊息中介軟體,主要用於應用與應用之間的通訊,有五種常見的使用方式,分別是:簡單模式,工作模式,釋出訂閱模式,路由模式以及萬用字元模式,這裡主要是簡單模式和工作模式!package cn.itcast.rabbitmq.simple;i

Android MVP模式入門到進門

今天是2018年最後一個工作日了,提前祝大家新年快樂啦~~~ 這是一篇面向Android初學者拋磚引玉的文章,正如以前的我——寫程式碼只考慮如何實現功能,對於設計模式完全沒有想法和認知。在這篇文章中,我會通過一個常用的登入場景,從幾十行程式碼的直接實現,一步步構建出入門級的MVP架構,向你們分享我所理

以太坊入門到跑路私有鏈搭建

以太坊私有鏈搭建 1. 下載geth客戶端並安裝 下載地址:https://geth.ethereum.org/downloads/ 選擇windows版本,本文只討論windows版本搭建

Spring Boot+Vue零開始搭建系統:專案前端_Vuejs環境搭建

2.驗證Node.js是否安裝好,在windows下,win+r召喚出執行視窗,輸入cmd開啟命令列視窗。輸入node -v即可得到對應的Node.js版本。 npm包管理器是整合在Node.js中了,所以在安裝Node.js的時候就已經自帶了npm,輸入npm -v可得

Shiro框架入門到實戰程式碼Shiro簡介和基礎應用

一:Shiro是一個功能強大且易於使用的Java安全框架,提供了認證,授權,加密和會話管理。 Authentication:身份認證/登入,驗證使用者是不是擁有相應的身份 Authorization:授權,即許可權驗證,驗證某個已認證的使用者是否擁有某個許可

入門到深入Fiddler

  在開發的過程中使用過不少的HTTP網路抓包工具,研究過HTTPAnalyzer,HttpWatch,感覺都很不錯。 記不清什麼時候自己搜了一個工具,它就是Fiddler,自從使用了Fiddler之後,我越來越喜歡它了。現在基本上不再使用其它的 抓包工具了。因為我發現,

0開始學架構心得體會

相信每個程式猿都有一個架構夢。我也不例外,從走上這條路開始,就想著有一天能成為架構師。跌跌撞撞在行業混了快六年,就是無法入門,不知道該從何做起,甚至對架構師的工作職責都只有一個模糊概念。幸好,現在資訊發達,可以從網上了解各種資料,重要讓我體會到知識經i濟帶來的好

零開始學jBPM6- 安裝

ps: 架構師交流群(QQ群號 304287620) 本文演示最流行的工作流j之一BPM,目前最新版本6.5.0 環境: win7 x64 jdk 1.8.0_31 jBPM6.5.0(https://download.jboss.org/jbpm/release/6.5.0.Final/jbpm-6.

vue成長之路+實戰+Vue2+VueRouter2+webpackvue-router路由入門

前言 通過前面我寫的VUE入門部落格,相信已經大概瞭解VUE是何物,但是對於細節性的問題我們還是有些忽略,有很多網友希望我能繼續寫相關部落格,但是由於工作繁忙原因一直無空去寫,終於得空於是協知識歸來。 2017年一定是VUE火熱的一年,引得無數人飛蛾