快捷導(dǎo)航

webpack+vue2構(gòu)建vue項(xiàng)目骨架的方法

更新時(shí)間：2018年01月09日 10:07:00 作者：駭客公社

本篇文章主要介紹了webpack+vue2構(gòu)建vue項(xiàng)目骨架的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

前端項(xiàng)目打包工具webpack與前端開(kāi)發(fā)框架vue，算是現(xiàn)在前后端分離后非常流行的技術(shù)了，今天主要講的是使用webpack和vue2構(gòu)建一個(gè)前后端分離項(xiàng)目的基本骨架。雖然使用vue-cli腳手架可以幫我們搭建好一個(gè)項(xiàng)目骨架，但是了解原理我覺(jué)得還是很重要的，所以這篇文章主要就寫webpack與vue構(gòu)建一個(gè)基礎(chǔ)項(xiàng)目。前提是已經(jīng)安裝了nodejs。

整個(gè)項(xiàng)目需要通過(guò)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

新建一個(gè)項(xiàng)目的目錄

我們首先需要新建一個(gè)目錄myApp用來(lái)放我們的項(xiàng)目，在終端里面進(jìn)入這個(gè)項(xiàng)目，然后開(kāi)始初始化項(xiàng)目。

初始化項(xiàng)目

$ npm init

初始化項(xiàng)目的時(shí)候，如果沒(méi)有特別需要，直接按“回車鍵”就可以。項(xiàng)目初始化完成后，就會(huì)生成一個(gè)packge.json文件主要存放項(xiàng)目依賴目錄和配置項(xiàng)目啟動(dòng)命令。

安裝依賴

$ npm i style-loader --D

使用npm安裝依賴的時(shí)候，我們會(huì)在最后加上“--D”，因?yàn)榧印?-D”后會(huì)在packge.json里面留上記錄。如果我們將項(xiàng)目在其他系統(tǒng)打開(kāi)時(shí)，會(huì)發(fā)現(xiàn)開(kāi)發(fā)的時(shí)候通過(guò)npm安裝的依賴不能用了，這是因?yàn)榇嬖谙到y(tǒng)兼容性。而如果開(kāi)發(fā)項(xiàng)目的時(shí)候安裝依賴加上“--D”，項(xiàng)目里面的node_modules就不需要拷貝過(guò)去，而打開(kāi)項(xiàng)目前，我們只需要通過(guò)npm安裝所有依賴就可以了。

$ npm i

配置webpack.config.js文件

webpack所有的配置都在webpack.config.js文件里面，所以初始化項(xiàng)目后，我們需要新建一個(gè)webpack.config.js文件然后配置。由于上次已經(jīng)專門寫過(guò)webpack的基本配置，這兒就不重復(fù)了，直接貼上我的配置代碼：

module.exports = {

 entry: './src/main.js',

 output:{

  path: __dirname + '/dist/',

  filename: 'bundle.js'

 },

 devtool:'source-map',

 devServer:{

  // 主要改變項(xiàng)目的根目錄

  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里面需要配置的主要時(shí)項(xiàng)目啟動(dòng)命令，一個(gè)開(kāi)發(fā)模式的start和打包項(xiàng)目build。

啟動(dòng)項(xiàng)目

$ npm start

打包項(xiàng)目

$ npm run build

整個(gè)項(xiàng)目的目錄

src：我們開(kāi)發(fā)的源文件都放在這個(gè)目錄里面

components：用來(lái)放所有的組件

styles：存放所有的樣式文件

utils：存放所有需要自己寫的方法函數(shù)

app.vue：所有的vue文件的入口文件

main.js：整個(gè)項(xiàng)目的js入口文件

index.html：這個(gè)文件可以放在真?zhèn)€項(xiàng)目的根目錄myApp里面，也可以放在webpack打包的生成的目錄dist里面，如果是放在根目錄則webpack.config.js里面的contentBase: __dirname ，如果在dist里面則contentBase: __dirname + '/dist/'。主要改變項(xiàng)目的服務(wù)根目錄的位置，就是我們localhos:8080打開(kāi)時(shí)瀏覽器顯示的目錄。（經(jīng)過(guò)測(cè)試放在打包生成的dist目錄會(huì)好些，主要在開(kāi)發(fā)模式可以實(shí)現(xiàn)實(shí)時(shí)更新。這個(gè)可能不太準(zhǔn)，后期再測(cè)試后進(jìn)行修改）

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的寫法，其實(shí)和var Vue = require('vue')是相同的意義<br>import Vue from 'vue';<br>
//引入App.vue文件，這個(gè)文件也是vue所有組件的入口，我們的項(xiàng)目就是將這個(gè)文件追加到index.html文件里面
import App from './App.vue';
new Vue({
 el:'#app',
 components: {App},<br>//主要目點(diǎn)就是將App追加到“#app”里面去
 render: h => h(App)
}) 
App.vue文件代碼
<template>
  <div>Hello VueJS!</div>  
</template>
<script>
 export default{
   name:"app"
  }
</script>

到這兒整個(gè)項(xiàng)目基本上就完成了基本的結(jié)構(gòu)，在瀏覽器輸入：localhost:8080，就可以看到顯示：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: