使用vue+webpack从零搭建项目
vue到現在已經成為一個熱門的框架，在項目實踐當中，如果想要創建一個新項目，通常都會使用vue-cli的腳手架工具，毋容置疑能夠方便很多，很多東西也不需要自己親自去配置。都知道，腳手架其實是vue結合webpack去實現的。在這里，我就想寫一篇從零創建vue結合webpack項目的文章，跟大家學習分享。
一、首先來整理個最簡單的目錄結構
? ? |-index.html
? ? |-main.js
? ? |-App.vue
? ? |-package.json
? ? |-webpack.config.js
首先需要個index.html的最終打開頁面，然后有一個main.js的js入口文件，還有一個vue后綴的vue文件（vue組件化開發少不了的vue后綴文件），還要一個package.json的工程文件（記錄你項目名稱、依賴、配置等信息的文件，這里用npm init生成），最后當然少不了的webpack配置文件。
到這里第一步完成。
二、安裝webpack及webpack-dev-server
npm install webpack webpack-dev-server --save-dev（或cnpm install webpack?webpack-dev-server --save-dev）
運行webpack-dev-server --inline --hot --port 8083
?
三、安裝各種依賴。
首先是各種各樣的loder和babel編譯所需要的包，這里簡單列舉一下：
vue-loader、vue-html-loader、css-loader、vue-style-loader、babel-loader等loader和vue-hot-reload-api
babel-core、babel-plugin-transform-runtime、babel-preset-es2015、babel-runtime（具體哪個什么功能自行查找了，不是范圍內……）
一次性全部安裝
cnpm install vue-loader vue-html-loader css-loader vue-style-loader babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime vue-hot-reload-api?--save-dev
（由于版本問題，以免帶來問題，推薦使用我找的版本，也是試了好久……）
貼一下package.json
{"name": "test","version": "1.0.0","description": "","main": "main.js","scripts": {"dev": "webpack-dev-server --inline --hot --port 8083"},"author": "","license": "ISC","devDependencies": {"babel-core": "^6.17.0","babel-loader": "^6.2.5","babel-plugin-transform-runtime": "^6.15.0","babel-preset-es2015": "^6.16.0","babel-runtime": "^6.11.6","css-loader": "^0.25.0","vue-hot-reload-api": "^1.3.2","vue-html-loader": "^1.2.3","vue-loader": "^8.5.4","vue-style-loader": "^1.0.0","webpack": "^1.13.3","webpack-dev-server": "^1.16.2"},"dependencies": {"vue": "^2.6.7"} } package.json?
別忘了安裝vue……
cnpm install vue --save，ok，依賴準備就緒
四、編寫webpack.config.js
入口文件是main.js，輸出文件bundle.js，同時配置好vue文件的loader和js的loader，代碼如下
module.exports={entry:'./main.js',output:{path:__dirname,filename:'bundle.js'},resolve: {alias: {'vue': 'vue/dist/vue.js'}},module:{loaders:[{test:/\.vue$/, loader:'vue'},{test:/\.js$/, loader:'babel', exclude:/node_modules/}]},babel:{presets:['es2015'],plugins:['transform-runtime']} };?
五、編寫其他頁面
index.html頁面：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"></div><script src="bundle.js"></script> </body> </html>?
main.js
import Vue from 'vue' import App from './App.vue'new Vue({el:'#app',components:{App},template: '<App/>' });?
App.vue
<template><h1>{{msg}}</h1> </template> <script>export default{data(){return {msg:'welcome Vue ^_^'}}} </script> <style>body{background: #ccc} </style>?
六、運行及查看
?
轉載于:https://www.cnblogs.com/wuzhiquan/p/10434897.html
總結
以上是生活随笔為你收集整理的使用vue+webpack从零搭建项目的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python sort 多级排序_Pyt
- 下一篇： vue商城源码_一个标星 5.2k+ 的