首頁 > 開發者 > JavaScript
webpack+vue2構建vue項目骨架的方法，webpackvue2
前端項目打包工具webpack與前端開發架構vue，算是現在前後端分離後非常流行的技術了，今天主要講的是使用webpack和vue2構建一個前後端分離項目的基本骨架。雖然使用vue-cli腳手架可以幫我們搭建好一個項目骨架，但是瞭解原理我覺得還是很重要的，所以這篇文章主要就寫webpack與vue構建一個基礎項目。前提是已經安裝了nodejs。
整個項目需要通過npm安裝的依賴
css ： style-loader、css-loader、sass-loader、node-sass
js：babel-core 、babel-loader、babel-preset-es2015
webpack：webpack、webpack-dev-server
vue：vuer 、vue-loade、vue-html-loader、vue-template-compiler
建立一個項目的目錄
我們首先需要建立一個目錄myApp用來放我們的項目，在終端裡面進入這個項目，然後開始初始化項目。
初始化項目
$ npm init
初始化項目的時候，如果沒有特別需要，直接按“斷行符號鍵”就可以。項目初始化完成後，就會產生一個packge.json檔案主要存放項目依賴目錄和設定項目啟動命令。
安裝依賴
$ npm i style-loader --D
使用npm安裝依賴的時候，我們會在最後加上“--D”，因為加“--D”後會在packge.json裡面留上記錄。如果我們將項目在其他系統開啟時，會發現開發的時候通過npm安裝的依賴不能用了，這是因為存在系統相容性。而如果開發項目的時候安裝依賴加上“--D”，項目裡面的node_modules就不需要拷貝過去，而開啟項目前，我們只需要通過npm安裝所有依賴就可以了。
$ npm i
配置webpack.config.js檔案
webpack所有的配置都在webpack.config.js檔案裡面，所以初始化項目後，我們需要建立一個webpack.config.js檔案然後配置。由於上次已經專門寫過webpack的基本配置，這兒就不重複了，直接貼上我的配置代碼：
module.exports = { entry: './src/main.js', output:{ path: __dirname + '/dist/', filename: 'bundle.js' }, devtool:'source-map', devServer:{ // 主要改變項目的根目錄 contentBase: __dirname + '/dist/', port:8080, inline:true }, module:{ loaders:[ {test:/\.css$/,loader :'style-loader!css-loader'}, {test:/\.js$/, loader:'babel-loader',exclude:/node_modules/}, { test: /\.vue$/, loader: 'vue-loader' } ] }, //vue檔案想要解析必須要要加上這句才能成功 resolve: { alias: { 'vue': 'vue/dist/vue.js' } }}
配置package.json
package.json裡面需要配置的主要時項目啟動命令，一個開發模式的start和打包項目build。
啟動項目
$ npm start
打包項目
$ npm run build
整個項目的目錄
src：我們開發的源檔案都放在這個目錄裡面
components：用來放所有的組件
styles：存放所有的樣式檔案
utils：存放所有需要自己寫的方法函數
app.vue：所有的vue檔案的入口檔案
main.js：整個項目的js入口檔案
index.html：這個檔案可以放在真箇項目的根目錄myApp裡面，也可以放在webpack打包的產生的目錄dist裡面，如果是放在根目錄則webpack.config.js裡面的contentBase: __dirname ，如果在dist裡面則contentBase: __dirname + '/dist/'。主要改變項目的服務根目錄的位置，就是我們localhos:8080開啟時瀏覽器顯示的目錄。（經過測試放在打包產生的dist目錄會好些，主要在開發模式可以實現即時更新。這個可能不太准，後期再測試後進行修改）
index.html檔案代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>webpack+vue</title></head><body> <div id="app"></div> <script src="./bundle.js"></script></body></html>
main.js檔案代碼
//引入vue架構<br>//import是es6的寫法，其實和var Vue = require('vue')是相同的意義<br>import Vue from 'vue';<br>//引入App.vue檔案，這個檔案也是vue所有組件的入口，我們的項目就是將這個檔案追加到index.html檔案裡面import App from './App.vue';new Vue({ el:'#app', components: {App},<br>//主要目點就是將App追加到“#app”裡面去 render: h => h(App)}) App.vue檔案代碼<template> <div>Hello VueJS!</div> </template><script> export default{ name:"app" }</script>
到這兒整個項目基本上就完成了基本的結構，在瀏覽器輸入：localhost:8080，就可以看到顯示：
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
