vue.cli腳手架初次使用圖文教程

vue-cli做用

vue-cli做爲vue的腳手架，能夠幫助咱們在實際開發中自動生成vue.js的模板工程。

vue-cli使用

!!前提：須要vue和webpack

1. 安裝全局vue-cli

   npm install vue-cli -g

2. 初始化，生成項目模板（my_project是項目名，本身隨意）

   vue init webpack my_project

3. 進入生成的項目文件夾

   cd my_project

4. 初始化，安裝依賴

   npm install

安裝完成，目錄樹：

run：

npm run dev

瀏覽器會自動打開到http://localhost:8080/#/ ，會看到歡迎頁：

上面是在本地運行，服務器上運行：

npm run build

生成靜態文件：

打開dist文件夾下新生成的index.html文件，會發現頁面空白，打開控制檯會發現頁面中引用的css和js文件都找不到：

說明引用路徑錯了，須要手動修改：

進入config/index.js

原配置中的引用路徑是’/’（根目錄）：

修改成’./’（當前目錄）：

run：

npm run build

Done: