1. 程式人生 > >vue學習一:新建或打開vue項目

vue學習一:新建或打開vue項目

div htm 們的 scrip 腳手架 桌面 框架 包括 title

1、前期準備:

  • node.js環境,安裝node
  • npm或者cnpm(npm的淘寶鏡像,在命令行中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org。由於有些npm有些資源被屏蔽或者是國外資源的原因,經常會導致用npm安裝依賴包的時候失敗,所以需要npm的國內鏡像---cnpm)
  • vue-cli 腳手架構建工具,構建項目(在命令行中運行命令 cnpm install -g vue-cli)

2、用vue-cli構建項目

進入要創建項目目錄的工作區,比如選擇桌面來存放新建的項目:cd desktop

在命令行中運行命令 vue init webpack firstVue。解釋一下這個命令,這個命令的意思是初始化一個項目,其中webpack是構建工具,也就是整個項目是基於webpack的。其中firstVue是整個項目文件夾的名稱,這個文件夾會自動生成在你指定的目錄中(我的實例中,會在桌面生成該文件夾),運行初始化命令的時候回讓用戶輸入幾個基本的選項,如項目名稱,描述,作者等信息,如果不想填直接回車默認就好。

技術分享圖片

打開firstVue文件夾,項目文件如下所示,這就是腳手架的作用,搭建工作平臺。(目錄介紹)

技術分享圖片

(1) Build:項目構建(webpack)相關代碼;

(2) config:配置目錄,包括端口號等。

(3) node_modules:npm加載的項目依賴模塊

(4) src:這個目錄當中的內容包含了我們基本上要做的事情,這裏包含了幾個文件:

  assets:存放圖片

  components:存放組件文件

  App.vue:項目入口文件,組件也可以直接寫在這裏不適用components

  main.js:核心文件

(5) static:靜態資源目錄

(6) test:初始測試目錄

(7) .xxxx:配置文件,包括git配置和語法配置等

(8) index.html:首頁

(9) package.json:項目配置文件

(10) README.md:說明文檔

3、安裝依賴資源

這個項目現在還只是一個結構框架,整個項目需要的依賴資源都還沒有安裝,依賴的資源在package.json文件(package.json文件可以手工編寫,也可以使用npm init命令自動生成)中有列出來。

要安裝依賴包,首先cd到項目文件夾(firstVue文件夾),然後運行命令 cnpm install ,等待安裝。

安裝完成之後,會在我們的項目目錄firstVue文件夾中多出一個node_modules文件夾,這裏邊就是我們項目需要的依賴包資源

4、運行項目

在項目目錄中,運行命令 npm run dev ,會用熱加載的方式運行我們的應用,熱加載可以讓我們在修改完代碼後不用手動刷新瀏覽器就能實時看到修改後的效果。

這裏簡單介紹下 npm run dev 命令,其中的“run”對應的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一個快捷方式。

項目運行成功後,瀏覽器會自動打開localhost:8080(如果瀏覽器沒有自動打開,可以手動輸入)。

技術分享圖片

整理自:如何運行vue項目

如何運行從github上down下來的項目

vue學習一:新建或打開vue項目