vue cli入門（一） 專案搭建

vue-cli作為一款mvvm框架語言(vue)的腳手架，整合了webpack環境及主要依賴，對於專案的搭建、打包、維護管理等都非常方便快捷。在開始專案之前，建議先熟悉vue.js基本語法。

1.安裝node.js

檢驗是否安裝成功，在cmd輸入命令 node -v,回車 及 npm -v,回車，如出現下圖所示版本資訊，表示安裝成功

如果你安裝的是舊版本的 npm，可以很容易得通過 npm 命令來公升級，命令如下

npm install npm -g

你可以使用**定製的 cnpm (gzip 壓縮支援) 命令列工具代替預設的 npm:

$ npm install -g cnpm --registry=

開啟cmd命令列工具，輸入npm install -g vue-cli,回車 全域性安裝vue-cli

(注：npm會有點慢，建議更改為國內**的映象，只換源即可。在cmd輸入命令：npm config set registry )

1.建立專案

開啟cmd，進入想要建立專案的目錄下，輸入：vue init webpack projectname

webpack預設是安裝2.0版本，若要安裝1.0版本，需在webpack後面加上版本號資訊，

vue init webpack#1.0 project-name(安裝1.0版本)

projextname是自定義的專案名稱，例：我這裡命名為vuedemo

建立vue-cli專案（1）

建立vue-cli專案（2）

project name:——專案名稱

project description:——專案描述

author:——作者

vue build:——構建模式，一般預設選擇第一種

install vue-router?:——是否安裝引入vue-router，這裡選是，vue-router是路由元件,後面構建專案會用到

use eslint to lint your code?:——這裡強烈建議選no 否則你會非常痛苦，eslint的格式驗證非常嚴格，多乙個空格少乙個空格都會報錯，所以對於新手來說，一般不建議開啟，會加大開發難度

setup unit tests with karma + mocha 以及setup e2e tests with nightwatch這兩個是測試，可以不用安裝

2.安裝依賴

專案建立完成，開啟資料夾可以看到目錄結構如下

未安裝依賴時專案結構

此時，專案已經初具雛形，但還未安裝依賴，需開啟cmd，進入專案所在根目錄下，輸入npm install,回車

依賴安裝中

依賴安裝結束

我們此時再開啟專案資料夾，可以看到多了node_modules資料夾，裡面是各種需要的依賴包

安裝依賴後專案結構

3.執行專案

開啟cmd，進入到專案所在目錄下，輸入npm run dev,回車，啟動專案

執行專案（1）

完成後，瀏覽器會自動開啟，監聽埠8080

執行專案（2）

可以在瀏覽器看到如下畫面，恭喜你，已成功構建vue-cli專案，接下來就可以開始開發啦

執行專案（3）

Vue cli入門（一） 專案搭建

vue cli入門 一 專案搭建 前言 vue cli是一款基於vue的專案腳手架工具，其整合了webpack環境和主要的依賴，對於我們的專案搭建 開發 打包 維護管理等都是非常的方便。主要內容 1 node.js安裝和配置環境 2 構建vue cli專案模板 安裝node.js本地環境 2 檢驗是...

點點滴滴Vue cli 一 專案搭建

一 安裝 node.js 安裝完畢後在cmd 鍵入node v 和 npm v 出現對應的版本號即表示安裝成功 二 安裝 映象 由於國內網路原因，推薦實用 映象來安裝vue cli的依賴，如果有網路fq條件的可以直接使用npm install g vue cli，兩種方式出現的結果是一樣的 有fq條...

vue學習（一）專案搭建

安裝cnpm npm install g cnpm registry 完成準備工作 1 開始安裝腳手架工具vue cli 開啟cmd,輸入以下命令，在全域性安裝vue cli 方式一 npm install global vue cli 方式二 cnpm install global vue cli...