vue-cli入門（一）——項目搭建

前言

vue-cli做爲一款mvvm框架語言(vue)的腳手架，集成了webpack環境及主要依賴，對於項目的搭建、打包、維護管理等都很是方便快捷。在開始項目以前，建議先熟悉vue.js基本語法。
安裝Node環境

安裝node環境

1.安裝node.js

在node.js官網下載穩定版本

下載完成後點擊安裝，安裝過程很簡單，一直next便可，安裝完成會自動添加node及npm環境變量。

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

2.安裝vue-cli

打開cmd命令行工具，輸入npm install -g vue-cli,回車 全局安裝vue-cli

注：npm會有點慢，建議更改成國內淘寶的鏡像，只換源便可。在cmd輸入命令：

npm config set registry https://registry.npm.taobao.o...

構建vue-cli項目

1.建立項目

打開cmd，進入想要建立項目的目錄下，輸入：vue init webpack projectname

webpack默認是安裝2.0版本，若要安裝1.0版本，需在webpack後面加上版本號信息，

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

projextname是自定義的項目名稱，例：我這裏命名爲vuedemo

命令輸入完成後敲回車，此時會自動下載template模板，稍微等待一會，會讓你按提示完成項目的建立，以下圖

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,回車，啓動項目

完成後，瀏覽器會自動打開，監聽端口8080

能夠在瀏覽器看到以下畫面，恭喜你，已成功構建vue-cli項目，接下來就能夠開始開發啦