vue2.0搭建vue手腳架(vue-cli)


1.安裝node.js

node官網下載並安裝node,安裝步驟很簡單,只要一路“next”就可以了。
安裝完成后,打開命令行工具輸入命令node -v,如下圖,如果出現對應版本號,就說明安裝成功了。

我們所需要的npm包管理器,是集成在node中的,所以,直接輸入npm -v就會如下圖所示,顯示出npm的版本信息。

到這里node的環境已經安裝完了,npm包管理工具也有了,但是由於npm的有些資源被牆,為了更快更穩定,所以我們需要切換到淘寶的npm鏡像——cnpm。

2.安裝cnpm

點擊進入淘寶的cnpm網站,里面有詳細的配置方法。
或者直接在命令行輸入:

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

 

然后等待,安裝完成。

輸入cnpm -v,可以查看當前cnpm版本,這個和npm的版本還是不一樣的。

使用cnpm的方法就是,需要用到npm的地方直接使用cnpm替換就可以了

3.vue安裝

在用 vue.js 構建大型應用時推薦使用 npm 安裝,npm 能很好地和諸如 webpack 或 browserify 模塊打包器配合使用。vue.js 也提供配套工具來開發單文件組件。

$ cnpm install vue

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

vue-cli 提供一個官方命令行工具,可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置,帶來現代化的前端開發流程。只需幾分鍾即可創建並啟動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目:

#my-project為自定義項目名
$ vue init webpack my-project

初始化一個項目,或使用

$ vue init webpack-simple my-project

初始化一個簡單的項目

運行初始化命令的時候回讓用戶輸入幾個基本的選項,如項目名稱,描述,作者等信息,如果不想填直接回車默認就好。

 需要注意的是項目的名稱不能大寫,不然會報錯

 

Project name (my-project) # 項目名稱(我的項目)

Project description (A Vue.js project) # 項目描述一個Vue.js 項目

Author 作者(你的名字)

Install vue-router? (Y/n) # 是否安裝Vue路由,也就是以后是spa(但頁面應用需要的模塊)

Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代碼? (Y [ yes ] / N [ no ])

Pick an ESLint preset (Use arrow keys) # 選擇一個預置ESLint(使用箭頭鍵)

Setup unit tests with Karma + Mocha? (Y/n) # 設置單元測Karma + Mocha? (Y/ N)

Setup e2e tests with Nightwatch? (Y/n) # 設置端到端測試,Nightwatch? (Y/ N)

當然這些都看你自己個人的情況,我這里是全選了是。

5.安裝項目所需要的依賴

剛初始化的項目是沒有依賴的,如果運行會報類似這樣的錯誤,

所以在這之前需要解決項目的依賴問題,使用下面的命令安裝項目的依賴。

$ cnpm install

如果出現如下圖情況,說明依賴解決成功。

6.運行項目

$ cnpm run dev

如果看到這個界面,說明配置成功


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM