webpack和vue2建構vue專案骨架講解
- 小云云原創
- 2018-01-11 09:32:142043瀏覽
本文主要介紹了webpack+vue2建構vue專案骨架的方法，小編覺得蠻不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
前端專案打包工具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> <p id="app"></p> <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>
<p>Hello VueJS!</p>
</template>
<script>
export default{
name:"app"
}
</script>到這兒整個專案基本上就完成了基本的結構，在瀏覽器輸入：localhost:8080，就可以看到顯示：
相關推薦：
以上是webpack和vue2建構vue專案骨架講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！