1. 程式人生 > >第一個vue專案例項(vue-cli)

第一個vue專案例項(vue-cli)

一、準備工作

vs code、chrome、node

二、步驟
1、全域性安裝vue-cli
npm install vue-cli -g
2、初始化一個專案
vue init <template-name> <projectName>
第一個是模板名稱,第二個是專案名稱,模板有webpack,webpack-simple ,browserify ,browserify-simple ,simple我們這個專案使用的是webpack。
3、把檔案切換到初始化的專案中
cd projectName
4、安裝依賴
npm install
5、執行
npm run dev

完成一個初始化vue專案

目錄介紹:
1、bulid和config都是webpack配置
2、src是存放專案原始檔的目錄
3、static存放第三方靜態資源,這個裡面的gitkeep是這個目錄為空,也可以把這個目錄提交的git倉庫裡面,因為通常一個空目錄是不能提交git倉庫裡面的。
4、babelrc是babel的配置項
5、editorconfig是編輯器的配置項
6、gitignore存放忽略建廠語法的目錄以及不會提交的檔案
7、index.html入口檔案
8、package.json是專案的描述和依賴,我們在開始的時候執行npm run dev,就相當於執行了這個檔案裡面的script的dev對應的node build/dev-server.js