輕鬆愉快vue(一)

2022-06-04 03:54:08 字數 1727 閱讀 1353

其實vue的語法比較簡單,入門較容易,初次學習可以先參照官方文件,動手寫寫小例子玩一下,我們直接從vue的工程化開始入手,這也是vue的真正玩法。

首先,我們將碟符切到d盤,開啟命令列,輸入:

npm install vue-cli-g

這個vue-cli呢,是vue的腳手架工具,可以自動生成目錄,跟express生成器差不多。

安裝完成後,我們就生成一下工程吧,輸入:

vue init  webpack vue2

這時會出現一些提示,直接一路回車即可。

最後,如果出現如上的圖示,就說明安裝成功了。

我們看一下生成好的目錄:

我們看到根目錄下有個packge.json檔案,開啟瞧一瞧:

我們看到,需要安裝的東西還真不少呢。得,慢慢裝吧。我們輸入命令:

cd  vue2

npm install

好,經過漫長的等待,我們終於將物料全部安裝完畢。然後呢,我們輸入命令:

但是很遺憾報錯了,看一下這個錯誤是npm版本不對造成的,好的,再來公升級npm.

使用 

npm -g install [email protected]
(版本號3.0.0 可以根據已發布的版本隨意公升級或降級),獲取最新版本的npm 檔案

再次使用 npm -v (npm version 會更詳細些) 檢視當前版本,好噠,顯示的是3.0.0,已經是最新版本了,這種方法也適用於降級處理。

再次輸入

npm run dev
我們看到,命令列進入阻塞等待狀態。

根據提示我們知道,8080埠已經被監聽了。開啟瀏覽器,輸入http://localhost:8080,會看到這樣的頁面:

有木有種高大上的感覺?反正我是被驚豔了~~

好,下面看一下目錄結構。

build:存放最終發布的**。

config:存放配置檔案。

src:開發目錄。這個比較重要哦~~

|---assets:資源目錄。

|---components:存放元件,都是.vue檔案。

|---router:存放路由檔案。

|---main.js:專案核心檔案,包括全域性的一些配置。

index.html:首頁入口檔案。

packge.json:安裝列表。

其他的就不用管了。

通過整理網上資料,自己動手做了一下,看起來不錯,慢慢來。

輕鬆愉快的時間管理方式

最近提高班發起了乙個部落格專題撰寫活動 我的時間管理 提高班裡面獨特的教育方法就是要求學生寫部落格 具體見部落格 部落格,提高班學生成長的秘籍 寫東西就是用文字整理你的生命 應接不暇的提高班學員都在爭先恐後的在csdn部落格上撰寫了自己的時間管理規劃,看到那些師弟師妹們一篇一篇被推薦的時間管理規劃的...

美日匯信賴商城讓你輕鬆愉快購物

美日匯信賴 讓你輕鬆愉快購物 美日匯 www.hnzyxok.com 網上開店 商機無限就在掌中。當 已經成為潮流,網購就成為大勢所趨。因為地域 品牌等諸多因素的限制,讓網購行業的發展空間無限增大 同時,由於網購行業的洶湧熱潮,以及網購事業種種優勢,美日匯加盟專案的發展穩中求勝,發展空間無限。現在好...

Vue 輕鬆實現vue底部點選載入更多

需求總是不斷改變的,好吧,今天就把vue如何實現逐步載入更多和分布載入更多說下,預設你知道如何去請求資料的哈 使用slice來進行限制展現從0,a的資料 div v for user in draw user.slice 0,a key user.uid class user item 判斷a的值是...