vue入門環境搭建

2021-08-03 10:59:17 字數 2382 閱讀 4654

最近,vue.js越來越火。在這樣的大浪潮下,我也開始進入vue的學習行列中,在網上也搜了很多教程,按著教程來做,也總會出現這樣那樣的問題(坑啊,由於網上那些教程都是vue.js 1.x版本的,現在用vue.js 的構建工具都已經公升級到2.0版本了),經過了一段時間的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基礎上做了好多調整,廢棄了好多api。。。廢話不多說了,把我踩過的坑,在這裡跟大家說說,希望對初學者有所幫助。ps:高手請繞道。

既然是入門例項,那肯定從最基礎的開始了,希望初學者們耐心看下去。首先,列出來我們需要的東西:

安裝完成之後,開啟命令列工具,輸入 node -v,如下圖,如果出現相應的版本號,則說明安裝成功。

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

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

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

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

**npm映象官網。

在命令列中執行命令 npm install -g vue-cli ,然後等待安裝完成。

通過以上三部,我們需要準備的環境和工具都準備好了,接下來就開始使用vue-cli來構建專案。

要建立專案,首先我們要選定目錄,然後再命令列中把目錄轉到選定的目錄。在這裡,我選擇桌面來存放新建的專案,則我們需要先把目錄cd到桌面,如下圖。

在桌面目錄下,在命令列中執行命令 vue init webpack firstvue 。解釋一下這個命令,這個命令的意思是初始化乙個專案,其中webpack是構建工具,也就是整個專案是基於webpack的。其中firstvue是整個專案資料夾的名稱,這個資料夾會自動生成在你指定的目錄中(我的例項中,會在桌面生成該資料夾),如下圖。

執行初始化命令的時候回讓使用者輸入幾個基本的選項,如專案名稱,描述,作者等資訊,如果不想填直接回車預設就好。

開啟firstvue資料夾,專案檔案如下所示。

這就是整個專案的目錄結構,其中,我們主要在src目錄中做修改。這個專案現在還只是乙個結構框架,整個專案需要的依賴資源都還沒有安裝,如下圖。

要安裝依賴包,首先cd到專案資料夾(firstvue資料夾),然後執行命令 cnpm install ,等待安裝。

安裝完成之後,會在我們的專案目錄firstvue資料夾中多出乙個node_modules資料夾,這裡邊就是我們專案需要的依賴包資源。

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

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

這裡簡單介紹下 npm run dev 命令,其中的「run」對應的是package.json檔案中,scripts欄位中的dev,也就是 node build/dev-server.js命令的乙個快捷方式。

專案執行成功後,瀏覽器會自動開啟localhost:8080(如果瀏覽器沒有自動開啟,可以手動輸入)。執行成功後,會看到如下所示的介面。

如果看到這個頁面,那就可以開屏香檳來慶祝了,恭喜你,專案執行成功了。

vue專案入門,環境搭建

全域性安裝cnpm這個工具 g 表示全域性安裝,一次安裝,永久使用 npm install g cnpm registry 第3步 安裝vue腳手架工具 g 表示全域性安裝 cnpm install vue cli g第4步 建立vue專案 先進入目標目錄 vue create vue study ...

ExtJS入門 環境搭建

extjs是一種主要用於建立前端使用者介面,是乙個基本與後台技術無關的前端ajax框架。一 引入類庫檔案 extjs類庫介紹 adapter 負責將裡面提供第三方底層庫 包括ext 自帶的底層庫 對映為ext 所支援的底層庫。build 壓縮後的ext 全部原始碼 裡面分類存放 docs api 幫...

Pig入門 環境搭建

pig入門 環境搭建 本文介紹在linux redhat hadoop2.2.0 jdk1.7的環境下安裝pig 0.14.0.二 安裝及配置 1 解壓至安裝目錄 比如 tar zxvf pig 0.14.0.tar.gz c itcast 2 配置 編輯 bash profile檔案 新增 exp...