webpack + vue2 構建vue項目骨架

時間 2019-11-11

標籤 webpack vue2 vue 構建項目骨架简体版

原文原文鏈接

　　前端項目打包工具webpack與前端開發框架vue，算是如今先後端分離後很是流行的技術了，今天主要講的是使用webpack和vue2構建一個先後端分離項目的基本骨架。雖然使用vue-cli腳手架能夠幫咱們搭建好一個項目骨架，可是瞭解原理我以爲仍是很重要的，因此這篇文章主要就寫webpack與vue構建一個基礎項目。前提是已經安裝了nodejs。javascript

整個項目須要經過npm安裝的依賴

css ： style-loader、css-loader、sass-loader、node-sasscss

js：babel-core 、babel-loader、babel-preset-es2015html

webpack：webpack、webpack-dev-server前端

vue：vuer 、vue-loade、vue-html-loader、vue-template-compilervue

新建一個項目的目錄

咱們首先須要新建一個目錄myApp用來放咱們的項目，在終端裏面進入這個項目，而後開始初始化項目。java

初始化項目

$ npm init

初始化項目的時候，若是沒有特別須要，直接按「回車鍵」就能夠。項目初始化完成後，就會生成一個packge.json文件主要存放項目依賴目錄和配置項目啓動命令。node

安裝依賴

$ npm i style-loader --D

使用npm安裝依賴的時候，咱們會在最後加上「--D」，由於加「--D」後會在packge.json裏面留上記錄。若是咱們將項目在其餘系統打開時，會發現開發的時候經過npm安裝的依賴不能用了，這是由於存在系統兼容性。而若是開發項目的時候安裝依賴加上「--D」，項目裏面的node_modules就不須要拷貝過去，而打開項目前，咱們只須要經過npm安裝全部依賴就能夠了。webpack

$ npm i

配置webpack.config.js文件

webpack全部的配置都在webpack.config.js文件裏面，因此初始化項目後，咱們須要新建一個webpack.config.js文件而後配置。因爲上次已經專門寫過webpack的基本配置，這兒就不重複了，直接貼上個人配置代碼：es6

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。web

啓動項目

$ 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框架
//import是es6的寫法，其實和var Vue = require('vue')是相同的意義
import Vue from 'vue';
//引入App.vue文件，這個文件也是vue全部組件的入口，咱們的項目就是將這個文件追加到index.html文件裏面
import App from './App.vue';
new Vue({
  el:'#app',
  components: {App},
//主要目點就是將App追加到「#app」裏面去
  render: h => h(App)
})

App.vue文件代碼

<template>
   <div>Hello VueJS!</div>   
</template>
<script>
  export default{
     name:"app"
  }
</script>

到這兒整個項目基本上就完成了基本的結構，在瀏覽器輸入：localhost:8080，就能夠看到顯示：

相關標籤/搜索

vue2+vuerouter2+webpack+vue

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。