npm安裝vue-cli
npm install -g vue-cli
創(chuàng)建vue2項(xiàng)目
vue init<template-name><project-name>// template-name可選項(xiàng):webpack划滋、webpack-simple账胧、browserify妹沙、browserify-simple、simple// project-name: 創(chuàng)建項(xiàng)目的名稱(chēng),缺省默認(rèn)在當(dāng)前目錄初始化項(xiàng)目信息
vue-cli使用詳情:https://github.com/vuejs/vue-cli
基于webpack創(chuàng)建的項(xiàng)目結(jié)構(gòu)
vue-cli初始化創(chuàng)建的項(xiàng)目結(jié)構(gòu)
build:webpack打包相關(guān)配置信息config:環(huán)境配置信息package.json:依賴(lài)項(xiàng)配置文件index.html:首頁(yè)src:項(xiàng)目源碼存放static:靜態(tài)資源文件存放目錄src/main.js:入口文件src/App.vue:App根節(jié)點(diǎn)
安裝及運(yùn)行
// 切入到項(xiàng)目目錄cd project-name// 安裝依賴(lài)npm install// 編譯npm run build// 啟動(dòng)devnpm run dev或npm run start
啟動(dòng)后會(huì)自動(dòng)在瀏覽器打開(kāi):http://localhost:8080/#/掏婶,顯示以下畫(huà)面:
啟動(dòng)效果