vue項目結構

前言: 初學Vue是有必定的學習成本的。好比我剛開始接觸Vue時，我還未接觸node.js，腳手架webpack。在安裝時就遇到了難題。vue-cli做爲一款mvvm框架語言(vue)的腳手架，集成了webpack環境及主要依賴，對於項目的搭建、打包、維護管理等都很是方便快捷。

1、安裝Node環境

在node.js官網下載穩定版本，我是在Windows下安裝的。

 

下載完成後點擊安裝，安裝過程很簡單，一直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)

構建vue-cli項目

一、建立項目

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

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

 

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

建立vue-cli項目

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這兩個是測試，能夠不用安裝

二、安裝依賴

項目建立完成，打開文件夾能夠看到目錄結構以下

未安裝依賴時項目結構  

此時，項目已經初具雛形，但還未安裝依賴。安裝依賴庫就是node_modules目錄下一堆的庫。這裏你先簡單理解爲項目運行所需的東西就好。打開cmd，進入項目所在根目錄下，輸入npm install，回車，若是網絡很差，須要一段時間。

依賴安裝中

依賴安裝結束

咱們此時再打開項目文件夾，能夠看到多了node_modules文件夾，裏面是各類須要的依賴包

安裝依賴後項目結構  

三、運行項目

打開cmd，進入到項目所在目錄下，輸入npm run dev,回車，啓動項目

 

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

 

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

成功了

你也許初學，不懂webpack，node.js，vue.cli，OK，不要緊，照着這篇文章一步步作下來，安裝webpack,npm,node,vue.cli，最終能運npm dev run運行項目便可。至少你如今能訪問vue項目的頁面了。