Vue -cli 入門 --項目搭建(一)

1、 安裝node.js環境.

在node.js官網下載穩定版本(https://nodejs.org/en/)

下載完成後點擊安裝，安裝過程很簡單，一直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.org)!!!!!!可能電腦會卡!!!!!

 3、構建項目

 1.建立項目

Vue.js 提供一個官方命令行工具，可用於快速搭建大型單頁應用。

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

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

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

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

 

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項目，接下來就能夠開始開發啦