如題第一次使用vue的腳手架vue-cli搭建vue項目，所以特意寫篇文章記錄下來以便回味.

一步一步搭建

1.首先在windows系統下打開命令行工具，然后輸入npm install -global vue-cli,這段代碼的作用就是全局安裝vue-cli，執行完這段命令之后可以在我們安裝nodejs的文件夾下面看到一個名為vue-cli文件，這就代表安裝vue-cli成功。

image.png

npm install -global vue-cli

2然后在F盤目錄下面創建一個名為VueStudy的文件，可以把它理解為一個主的文件夾，后面我們創建的vue項目就是它的子文件。通過命令行到達VueStudy文件下面輸入vue init webpack my-project(自定義項目名稱)，這段代碼的意思是：創建一個基于 webpack 模板的新項目。

image.png

接下來就跟著輸入項目名稱、項目描述、作者、是否安裝vue-router、是否使用ESlint檢查你的代碼等等

image.png

跟著上面全部輸完之后，可以發現我們的VueStudy文件下面多出了一個名為showVue的文件，則說明文件生成成功。如圖所示：這是項目的大體結構。

image.png

此時我們進入到showVue文件下面，執行如下命令npm install，它的作用是安裝依賴。

image.png

image.png

可以很明顯的看到在執行完npm install命令之后，項目文件中會多出了一個名為node_modules的文件，它就是我們所需要安裝的依賴。
接下來我們輸入以下命令,這段代碼的作用是自動幫我們啟動一個端口號為8080的服務。

npm run dev

接下來就是見證奇跡的時候啦，這個時候瀏覽器會自動幫我們打開一個“http://localhost:8080/#/”窗口，出現如下圖片則說明成功啦。

image.png

image.png

當然這只是服務器幫我們啟的頁面，要想自己在本地能夠啟動還需要輸入最后一個命令

npm run build

執行完此命令后，你會驚喜的發現你的showVue文件下面有多出了一個名為dist的文件，這就是我們需要的本地起頁面的文件，這個時候執行dist文件下面的index.html就能看到.

image.png

這個時候還會有一個小坑，就是可能你打開dist文件下index.html的時候發現頁面沒有一片空白同時發現控制臺報錯，如圖：

image.png

不必驚慌，這只是說明你的css與js文件的路徑配置有問題，只需要修改為正確的就行啦。

image.png

image.png

從圖上可以看出已經成功啦

總結

其實用vue-cli搭建vue項目是算不上復雜的，只是第一次倒騰總覺得有點麻煩，重要的只需要記住這5行命令行就行啦:

//全局安裝 vue-cli
npm install -g vue-cli
//創建一個基于 webpack 模板的新項目
vue init webpack my-project
//進入項目目錄
cd my-project
安裝依賴
npm install
//創建8080端口
npm run dev
//生成dist文件
npm run build

Vue的文件結構介紹

image.png

關于npm run dev(啟動Node.js本地開發服務器)和npm run build(建立資產進行生產)官方的解釋

image.png

參考鏈接
參考鏈接

7月1號更新(個人分析通過官網vue-cli腳手架啟動的項目)

image.png

components文件夾中Hello.vue就是一個名為Hello的vue的子組件。

export default{
    name:'hello',
    data(){
        return{
            msg:'Vue-Cli-Study'
      }
    }
}

這段代碼就相當于定義了一個局部的子組件，組件的名稱為hello，返定義了一個data函數并且返回了一個msg屬性。然后通過router文件夾中的index.js文件，在實例化路由對象中寫上路徑就可以被引用了。

image.png