1. 程式人生 > >vue 構建項目vue-cli

vue 構建項目vue-cli

依賴 div 項目配置 pack 直接 localhost Edito 文件 index

  1、首先得有node和npm的環境,node的下載:http://nodejs.org/download/。安裝node之後,npm也自動生成了,顯示版本號就意味著安裝成功

  技術分享圖片

  2、接下來就是安裝vue-cli腳手架,執行以下命令:

$ npm install -g vue-cli       安裝腳手架
$ vue init webpack demo        利用webpack生成一個模板,項目名是demo
$ cd demo                      進入到demo項目
$ npm install                  安裝依賴
$ npm run dev                  運行項目

 

   技術分享圖片

  在瀏覽器執行 http://localhost:8080,出現以下截圖意味著成功。

  技術分享圖片

  3、腳手架目錄說明

.
├── build/                      # webpack配置文件
│   └── ...
├── config/
│   ├── index.js                # 主要項目配置
│   └── ...
├── src/
│   ├── main.js                 # 應用入口文件
│   ├── App.vue                 # 主應用程序組件
│   ├── components
/ # ui組件 │ │ └── ... │ └── assets/ # 模塊資源(由webpack處理) │ └── ... ├── static/ # 純靜態資源(直接復制) ├── test/ │ └── unit/ # 單元測試 │ │ ├── specs/ # 測試spec文件 │ │ ├── index.js # 測試構建條目文件 │ │ └── karma.conf.js # 測試跑步者配置文件 │ └── e2e
/ # e2e測試 │ │ ├── specs/ # 測試spec文件 │ │ ├── custom-assertions/ # e2e測試的自定義斷言 │ │ ├── runner.js # 測試跑步腳本 │ │ └── nightwatch.conf.js # 測試跑步者配置文件 ├── .babelrc # babel 配置 ├── .postcssrc.js # postcss 配置 ├── .eslintrc.js # eslint 配置 ├── .editorconfig # editor 配置 ├── index.html # index.html模板 └── package.json # 構建腳本和依賴關系

  註意:css、js、img等靜態資源放在static下面,命名為css、js、img等,不然打包後會找不到路徑

  如需安裝自己想要的文件,如:elementUI

  在根目錄找到 package.json,在"devDependencies"下加入 "element-ui": "^2.4.11",然後在命令窗口執行npm install就可以了。

vue 構建項目vue-cli