Vue(四)之webpack和vue-cli

時間 2019-11-21

標籤 vue webpack cli 简体版

原文原文鏈接

01-webpack介紹

官方文檔：https://www.webpackjs.com/concepts/javascript

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。css

# 全局下載webpack的3.12.0版本
npm install webpack@3.12.0 -g

# 查看版本
webpack -v

02-webpack的使用

# 把main.js 打包成 bundle.js
webpack ./main.js ./bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app"></div>
    <!-- bundle.js是經過webpack編譯打包輸出的js文件 -->
    <script type="text/javascript" src="./bundle.js"></script>

    <!-- webpack  ./main.js   ./bundle.js -->

    <!-- 這種語法瀏覽器不兼容 -->
    <!-- <script type="text/javascript">
        import Vue from './vue.js'
    </script>
    -->
</body>
</html>

module.html

// 聲明入口的組件
var App = {
    template:`<div>我是入口組件</div>`
};

// 聲明並導出
export var num = 2; //做爲一整個對象的key拋出

// 聲明在導出
var num2 = 4;
export {num2}

// 拋出一個函數
export function add(x,y) {
    return console.log(x+y);
}
// 先拋出
export default App;

App.js

// 整個程序的入口

// 引入第三方的庫  es6Module模塊導入方法
import Vue from './vue.js'

//再導入
// import App from './App.js'

// 對象的解構
// import {num,num2,add} from './App.js'


import * as  object from './App.js'
console.log(object);

// console.log(num);
// console.log(num2);
// add(3,5)

new Vue({
    el:"#app",
    data(){
        return {

        }
    },
    components:{
        App:object.default
    },
    template:`<App />`
});

main.js

// 引入第三方的庫  es6Module模塊導入方法
import Vue from './vue.js'

new Vue({
   el:"#app",
   data(){
      return {

      }
   },
   components:{
      App:object.default
   },
   template:`<App />`
});

# 進入當前的根目錄下，執行
npm init --yes

# 下載webpack爲項目開發依賴
npm install webpack@3.12.0 -D

# 建立webpack.config.js
module.exports = {
    // entry 入口
    // output 出口
    entry:{
        main: './main.js'
    },
    output:{
        filename: './bundle.js'
    },
    // 在開發環境下，每次更改代碼，都會從新進行編譯
    watch: true,
}

# 直接執行 webpack 就能夠了
webpack

# 或者在 package.json裏配置
"scripts": {
    "dev": "webpack"
  },

# 在終端執行，也能夠得到結果
npm run dev

{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "vue": "^2.5.17"
  }
}

package.json

module.exports = {
    // entry 入口
    // output 出口
    entry:{
        main: './main.js'
    },
    output:{
        filename: './bundle.js'
    },
    // 在開發環境下，每次更改代碼，都會從新進行編譯
    watch: true,
}

webpack.config.js

2.1 模塊html

    在模塊化編程中，開發者將程序分解成離散功能塊(discrete chunks of functionality)，並稱之爲模塊。

    每一個模塊具備比完整程序更小的接觸面，使得校驗、調試、測試垂手可得。 精心編寫的模塊提供了可靠的抽象和封裝界限，使得應用程序中每一個模塊都具備條理清楚的設計和明確的目的。

    Node.js 從最一開始就支持模塊化編程。然而，在 web，模塊化的支持正緩慢到來。在 web 存在多種支持 JavaScript 模塊化的工具，這些工具各有優點和限制。webpack 基於從這些系統得到的經驗教訓，並將模塊的概念應用於項目中的任何文件。

2.2 什麼是webpack模塊前端

webpack 模塊可以以各類方式表達它們的依賴關係。vue

03-webpack的配置修改

//自帶nodejs環境  cmd規範
// module.exports = {}
// var a = require('./webpack.config.js')


// 若是在項目中配置了webpack.config.js 那麼在終端中直接輸入webpack,默認識別webpack.config.js項目配置文件
module.exports = {
    // 入口
    entry:{
        "main":'./main.js'
    },
    // 出口
    output:{
        filename:'./bundle.js'
    },
    watch:true

}

webpack.dev.config.js

// 上線環境下
module.exports = {
    // 入口
    entry:{
        "main":'./main.js'
    },
    output:{
        filename:'./bundle.js'
    }

};

webpack.prod.config.js

開發環境：webpack.dev.config.js ，上線環境下：webpack.prod.config.js ，在 package.json 裏配置：java

{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config ./webpack.dev.config.js",
    "build": "webpack --config ./webpack.prod.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "vue": "^2.5.17"
  }
}

04-css-loader介紹

// 導入css文件
import './main.css'

# 下載 css-loader和style-loader
npm install css-loader -D;npm install style-loader -D

# 配置loader，在webapck.config.js中
module.exports = {
    // 入口
    entry:{
        "main":'./main.js'
    },
    // 出口
    output:{
        filename:'./bundle.js'
    },
    watch:true,
    // 模塊中的loader
    module: {
        loaders:[
            {
                test: /\.css$/,
                // 先識別css-loader 再識別style-loader
                loader: 'style-loader!css-loader'
            }
        ]
    }
};

05-webpack插件-plugins

插件是 webpack 的支柱功能。webpack 自身也是構建於，你在 webpack 配置中用到的相同的插件系統之上！插件目的在於解決loader沒法實現的其餘事。node

5.1 剖析webpack

webpack 插件是一個具備apply屬性的 JavaScript 對象。apply屬性會被webpack compiler調用，而且 compiler 對象可在整個編譯生命週期訪問。ios

5.2 用法es6

因爲插件能夠攜帶參數/選項，你必須在 webpack 配置中，向 plugins 屬性傳入 new 實例。根據你的 webpack 用法，這裏有多種方式使用插件。

# 安裝插件 html-webpack-plugin
npm install html-webpack-plugin -D

# 配置webpack.prod.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');

// 插件
plugins:[
    new HtmlWebpackPlugin({
        template:'./index.html',//參照物
    })
]

// nodejs中內置模塊path
var path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin');
// html-webpack-plugin
// 若是在項目中配置了webpack.config.js 那麼在終端中直接輸入webpack,默認識別webpack.config.js項目配置文件
module.exports = {
    // 入口
    entry:{
        "main":'./src/main.js'
    },
    // 出口
    output:{
        //相對轉絕對
        path:path.resolve('./dist'),
        filename:'./bundle.js'
    },
    // 模塊中的loader  loader加載器 它能對css、json png jpg mp3 mp4 es6的js代碼
    module:{
        loaders:[
            {
                test:/\.css$/,
                loader:'style-loader!css-loader'
            }
        ]
    },
    // 插件
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html',//參照物
        })
    ]
};

webpack.config.js

npm install -g http-server

# 上線測試命令
hs -o -p 9999

06-webpack-dev-server介紹

# 下載 
npm install webpack-dev-server@2.9.0 -D

# 配置package.json
"scripts": {
  "dev": "webpack-dev-server  --open --hot --inline   --config  ./webpack.dev.config.js",
  "build": "webpack --config  ./webpack.prod.config.js"
}

# 執行完，代碼更新時，會自動變化
npm run dev

{
  "name": "02-module_deep",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server  --open --hot --inline   --config  ./webpack.dev.config.js",
    "build": "webpack --config  ./webpack.prod.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.9.0"
  },
  "dependencies": {
    "vue": "^2.5.17"
  }
}

package.json

07-vue-loader和單頁面組件的介紹

# 下載
npm install vue-loader@14.1.1 -D  vue-template-compiler@2.5.27 -D

// nodejs中內容模塊
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
// html-webpack-plugin
// 若是在項目中配置了webpack.config.js 那麼在終端中直接輸入webpack,默認識別webpack.config.js項目配置文件
module.exports = {
    // 入口
    entry:{
        "main":'./src/main.js'
    },
    // 出口
    output:{
        path:path.resolve('./dist'),//相對轉絕對
        filename:'./bundle.js'
    },
    // 模塊中的loader  loader加載器 它能對css、json png jpg mp3 mp4 es6的js代碼
    module:{
        loaders:[
            {
                test:/\.css$/,
                loader:'style-loader!css-loader'
            },
            {
                test:/\.vue$/,
                loader:'vue-loader'
            }
        ]
    },
    watch:true,
    // 插件
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html',//參照物
        })
    ]
};

webpack.dev.config.js

<!--  組件結構 html
      業務邏輯 js
      組件樣式 css
 -->
 <template>
     <!-- 必定是閉合標籤 -->
     <div class="app">
    
         <h3>{{msg}}</h3>
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
             <li>4</li>
             <li>5</li>
         </ul>
         <Header />
     </div>
     
 </template>
 <script>
 import Header from './Header.vue'
     export default{
         data(){
             return {
                 msg:'學習單頁組件'
             }
         },
         methods:{

         },
         computed:{

         },
        // 掛載
         components:{
             Header
         }
     }
 </script>
 <!-- scoped 它表示只對當前組件的樣式起做用 -->
 <style scoped>
 /*全局的*/
 h3{
     color: yellow;
 }
 </style>

App.vue

<template>
    <div>
        
        <h3>{{att}}</h3>
    </div>
</template>

<script>
export default {

  name: 'Header',

  data() {
    return {
        att:"alex"
    };
  },
};
</script>

<!-- scoped 它表示只對當前組件的樣式起做用 -->
<style scoped>
h3{
    color: green;
}

</style>

Header.vue

 <!-- scoped 它表示只對當前組件的樣式起做用 -->
 <style scoped>
 /*全局的*/
 h3{
     color: yellow;
 }
 </style>

08-前端腳手架 vue-cli

# 下載安裝vue-cli
官網：https://cli.vuejs.org/zh/

# 下載，版本是3.x
npm install -g @vue/cli

# 檢查版本
vue -V

# 下載舊版本2.x
npm install -g @vue/cli-init
# `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同
vue init webpack my-project

Vue CLI 3 和舊版使用了相同的 vue 命令，因此 Vue CLI 2 (vue-cli) 被覆蓋了。若是你仍然須要使用舊版本的 vue init 功能，你能夠全局安裝一個橋接工具。

# 此時電腦上既可使用2.x和3.x版本的腳手架工具

# 關於vue-cli 2.x版本的腳手架工具-命令
vue init <模板> <項目名>

# 模板：
    webpack-simple  簡單配置webpack模板
    webpack  複雜的webpack模塊，單元測試、ESlint、熱重載

# 1. 切換到指定的文件夾，執行，生成項目
vue init webpack-simple my-project

# Use sass ? No

# dependencies 當前項目依賴的模塊，devDependcies 經過腳手架搭建以後必需要以來的包，開發環境依賴

# 2. 而後執行 npm install 安裝全部依賴 
npm install 

# 3. 執行 
npm run dev

09-項目各目錄文件詳解

vue的生態圈vue-awesome 參考連接：https://segmentfault.com/p/1210000008583242/read?from=timeline

// main.js是整個項目的入口啓動文件

// 導入npm下載的模塊
import Vue from 'vue'
// 導入本身編寫的模塊  
// 不一樣在於 若是是npm下載的 from '名稱'  本身編寫的模塊  from '路徑引入'
import App from './App.vue'


// 1.引入全局的組件
import Header from './components/Common/Header.vue'
// 2.註冊全局組件
Vue.component(Header.name,Header);


new Vue({
  el: '#app',
  // DOM直接渲染  
  // appendChild()
  render: h => h(App)
});

main.js

<template>
  <!-- 組件的頁面結構 -->
  <div id="app">
    <Header />
  <h3>{{msg}}</h3>  
    <div v-html = 'title'></div>
    <ul>
      <!-- key綁定key的時候 若是數據中有id 就綁定id，沒有id 綁定index -->
      <li v-for = '(item,index) in datas' :key = 'index'>
        {{ item }}
      </li>
    </ul>

    <Home  :text = 'text' @add = 'addHandler'/>

  </div>
</template>

<script>
//導入
import Home from './components/Home/Home.vue'

// 組件內部的業務邏輯
export default {
  name: 'app',
  data () {
    return {
      msg: '咱們來學習vue-cli腳手架項目',
      title:"<h3>alex</h3>",
      datas:['抽菸','喝酒','燙頭'],
      text:"我是父組件的內容"
    }
  },
  components:{
    Home
  },
  methods:{
    addHandler(data){
      console.log(data);
    }
  }
}
</script>

<style>
/*組件的樣式*/
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

App.vue

10-項目中使用vue的API

11-公共組件的建立和使用

// 1.引入全局的組件
import Header from './components/Common/Header.vue'
// 2.註冊全局組件
Vue.component(Header.name,Header);

12-vue-cli的webpack模板項目

# 1. 建立webpack模板的項目
vue init webpack my-project-webpack

# 2. 執行 
cd my-project-webpack

# 3. 運行
npm run dev 或者 npm run start

13-項目中集成插件vue-router

// 整個路由的配置文件

import Vue from 'vue'
import VueRouter from 'vue-router'
// alias   @
// /Users/majinju/Desktop/vue_lesson/代碼/06-vue-cli腳手架的使用/02-webpack_project/src
import Home from '@/components/Home/Home'
import FreeCourse from '@/components/FreeCourse/FreeCourse'

// 讓vue使用此插件
Vue.use(VueRouter);
// 至關於
// Vue.protoype.$router = VueRouter

var router = new VueRouter({
    routes:[
        {
            path:'/',
            name:'Home',
            component:Home
        },
        {
            path:'/free',
            name:'FreeCourse',
            component:FreeCourse
        }

    ]
});
export default router;

src/router/index.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router/index.js'


Vue.config.productionTip = true;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

src/main.js

<template>
  <div id="app">
    
    <router-link to = '/'>首頁</router-link>
    <router-link to = '/free'>免費課程</router-link>

    <router-view /> 
  </div>
</template>

<script>


export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

src/App.vue

# 下載 vue-router
npm install vue-router -S

npm run dev

# 1. 先在main.js 導入vue-router
index.js ---> import VueRouter from 'vue-router'
main.js   ---> import router from './router/index.js'

# 2.

相關標籤/搜索

idea2016+vue+webpack+vue

XLink 和 XPointer 教程

MyBatis教程

MySQL教程

每日一句

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