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

前端項(xiàng)目打包工具webpack與前端開發(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。

創(chuàng)新互聯(lián)建站成立于2013年，我們提供高端重慶網(wǎng)站建設(shè)、成都網(wǎng)站制作公司、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站定制、成都全網(wǎng)營(yíng)銷、微信小程序開發(fā)、微信公眾號(hào)開發(fā)、成都網(wǎng)站推廣服務(wù)，提供專業(yè)營(yíng)銷思路、內(nèi)容策劃、視覺(jué)設(shè)計(jì)、程序開發(fā)來(lái)完成項(xiàng)目落地，為成都主動(dòng)防護(hù)網(wǎng)企業(yè)提供源源不斷的流量和訂單咨詢。

整個(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)目，然后開始初始化項(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)打開時(shí)，會(huì)發(fā)現(xiàn)開發(fā)的時(shí)候通過(guò)npm安裝的依賴不能用了，這是因?yàn)榇嬖谙到y(tǒng)兼容性。而如果開發(fā)項(xiàng)目的時(shí)候安裝依賴加上“--D”，項(xiàng)目里面的node_modules就不需要拷貝過(guò)去，而打開項(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è)開發(fā)模式的start和打包項(xiàng)目build。

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

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

$ npm start

打包項(xiàng)目

$ npm run build

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

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

src：我們開發(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打開時(shí)瀏覽器顯示的目錄。（經(jīng)過(guò)測(cè)試放在打包生成的dist目錄會(huì)好些，主要在開發(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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前題目：webpack+vue2構(gòu)建vue項(xiàng)目骨架的方法
轉(zhuǎn)載源于：http://muchs.cn/article38/ihecsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、微信公眾號(hào)、用戶體驗(yàn)、域名注冊(cè)、營(yíng)銷型網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)