手動搭建vue項目css
首先你應當安裝一下npm以及nodejs
安裝完成後,進行以下操做:html
// 建立項目根目錄 mkdir some_project_name // 切換到項目目錄下 cd some_project_name // 初始化該項目 npm init -y // 下載並安裝webpack相關包 npm install webpack webpack-cli webpack-dev-server --save-dev // 手動建立相關的文件夾 --mkdir 中使用 // 或 \ mkdir src\pages src\components src\assets\js src\assets\css src\assets\imgs src\assets\fonts dist build // 手動建立相關文件 --touch 命令中可使用 / . touch index.html src/assets/js/main.js build/webpack.dev.conf.js build/webpack.base.conf.js build/webpack.prod.conf.js
利用IDE編寫 index.html 以及 main.js
(index.html)vue
<!DOCTYPE html> <html> <head></head> <body></body> <script src="./src/js/bundle.js"></script> </html>
(src/assets/js/main.js)node
(function(){ const promise = new Promise((resolve,reject) =>{ resolve('hello webpack project') }) promise.then(res =>{ console.log(res); }) })();
修改package.json中scripts字段webpack
"scripts":{ "dev":"webpack-dev-server --inline --progress --config ./build/webpack.dev.conf.js" }
編寫./build/webpack.dev.conf.jsweb
const path = require('path'); module.exports = { entry: path.resolve(__dirname,'./src/assets/js/main.js'), output:{ path: path.resolve(__dirname,'./dist'), filename: 'js/bundle.js' } }
啓動項目,並打開瀏覽器 localhost:8080npm
npm run dev
控制檯若是出現了 'hello webpack project' 字樣,說明webpack項目已經可使用
json
後續補充 熱啓動等優化...promise