Vue2.0搭建腳手架
阿新 • • 發佈:2018-11-29
Vue-cli腳手架的搭建
1.隨著vue.js越來越火爆,更多的專案都用到vue進行開發,在實際的開發專案中如何搭建開發腳手架呢,今天跟大家分享一下:
首先需要了解的知識
Html
Css
Javascript
Node.js 環境(npm包管理工具)
Webpack 自動化構建工具
首先需要安裝node.js環境:直接在官網下載即可
安裝完node.js環境之後就可以,使用npm 命令進行外掛的安裝了。
1、說明:npm(node package manager)是nodejs的包管理器,用於node外掛管理(包括安裝、解除安裝、管理依賴等);
2、使用npm安裝外掛:命令提示符執行: npm install 外掛名稱
3、選裝 cnpm 因為npm安裝外掛是從國外伺服器下載,受網路影響大,可能出現異常,如果npm的伺服器在中國就好了,所以我們樂於分享的淘寶團隊幹了這事!來自官網:“這是一個完整 npmjs.org 映象,你可以用此代替官方版本(只讀),同步頻率目前為 10分鐘 一次以保證儘量與官方服務同步。”;
安裝:npm install -g cnpm --registry=https://registry.npm.taobao.org
輸入cnpm -v,可以檢視當前cnpm版本
Vue-cli的安裝:
直接在命令列輸入:
npm install vue-cli -g //全域性安裝vue-cli
安裝之後可以在命令列輸入:
vue -V //檢視當前版本
可以看到版本號,若報錯則安裝失敗
專案的安裝
首先需要安裝一個基於webpack的模板,輸入
vue init webpack <專案目錄名稱> //
安裝完成之後就會,出現各種配置,按自己需求選擇性安裝。
安裝完成之後直接在命令列輸入:
npm cd <專案名稱> //進入到專案目錄
npm run dev //執行啟動專案 dev不是固定的(可以自定義);
剛初始化的專案是沒有依賴的,如果執行會報類似這樣的錯誤,輸入命令
cnpm install
安裝完成之後出現上面的情況,輸入 相應的埠進行訪問即可。
出現這個頁面就是,搭建完成!