1. vue--第一個vue-cli程式

Vue的開發都是要基於Nodejshttp://www.cppcns.com，實際開發採用Vue-cli腳手架開發，vue-router路由，vuex做狀態管理；Vue UI，介面我們一般使用ElementUI（餓了麼出品），或者ICE（阿里巴巴出品）來快速搭建前端專案~~

ElementUI

ICE

1.1 什麼是vue-cli

vue-cli官方提供的一個腳手架，用於快速生成一個vue的專案模www.cppcns.com板；

預先定義好的目錄結構及基礎程式碼，就好比咱們在建立Maven專案時可以選擇建立一個骨架專案，這個估計專案就是腳手架，我們的開發更加的快速；

專案的功能

• 統一的目錄結構
• 本地程式設計客棧除錯
• 熱部署
• 單元測試
• 整合打包上線

1.2 需要的環境

• Node.jhttp://www.cppcns.coms
• Git

確認nodejs安裝成功：

• cmd下輸入node -v，檢視是否能夠正確打印出版本號即可！
• cmd下輸入npm -v，檢視是否能夠正確打印出版本號即可！

npm，就是一個軟體包管理工具

安裝vue-cli

npm instal1 vue-cli -g
#測試是否安裝成功#檢視可以基於哪些模板建立vue應用程式，通常我們選擇webpack
vue list

提示:如果vue list 查詢失敗請把 node_global目標新增到path環境變數

1.3 第一個vue-cli程式

1.3.1 建立一個Vue專案

我們隨便建立一個空的資料夾在電腦上，我這裡在D盤下新建一個目錄

1.3.2 建立一個基於webpack模板的vue應用程式

#1、首先需要進入到對應的目錄 cdE:\IDEACode\Vue\vue
#2、這裡的myvue是頂日名稱，可以根據自己的需求起名
vue init webpack myvue

一路都選擇no即可；

說明：

1.3.3 初始化並執行

cd myvue
npm install
npm run dev

命令執行成功後會出現以下提示

在遊覽器開啟剛剛的埠

可以在index.js修改埠號等配置檔案

總結

到此這篇關於Vue新手指南之建立第一個vue-cli程式的文章就介紹到這了,更多相關第一個vue-cli程式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！