【構建】手把手構建一個VUE項目

時間  2019-12-05
標籤 構建 手把手 一個 vue 項目 简体版
原文   原文鏈接

1、項目準備

1.建立目錄

建立webpackTest文件夾css

2.初始化

建立package.json文件html

npm init

3.建立業務目錄

webpackTest/app
  ├── css/
  │   ├── reset.scss
  ├── js/
  │   ├── home/ 
  │   │   ├── index.vue
  │   ├── router/
  │   │   ├── index.js
  │   ├── App.vue
  │   ├── main.js
  │   ├── test.vue
  └── views/
      └── index.html

2、建立配置文件

1.建立webpack.config.js文件

2.文件配置

基礎配置：
entry（入口，webpack要構建的文件）
module（配置各類loader）
plugins（插件）
output（輸出）

進階配置：
resolve（webpack怎麼查詢文件）
devtool（eg:sourceMap如何用）
devServer（開啓服務）vue

//基礎配置webpack.config.js

const path = require('path');

module.exports = {
  entry:{
    app:'./app/js/main.js'
  },
  module:{
   loaders:[{
      test: /\.html$/,
      loader: 'html-loader'
    },{
      test:/\.vue$/,
      loader:'vue-loader'
    },{
      test:/\.scss$/,
      loader:'style-loader!css-loader!sass-loader'//webpack支持對一個文件多個loader的串行解析，解析順序爲從右到左
    }]
  },
  plugins:[],
  output:{
    filename:'[name].min.js',
    path:path.resolve(__dirname,'dist')//node提供的path對象,resolve表示相對路徑，__dirname表示當前路徑
  }
}

3.安裝webpack

npm install webpack -D

4.安裝webpack-dev-server

webpack-dev-server 提供了一個簡單的 web 服務器，而且可以實時從新加載(live reloading)。
html-webpack-plugin該插件將爲你生成一個HTML5文件。
clean-webpack-plugin該插件自動清除 dev-server 生成的文件，防止開發過程當中的緩存。
參考資料：webpack中文文檔node

//安裝webpack-dev-server
npm install --save-dev webpack-dev-server
npm install html-webpack-plugin -D
npm install clean-webpack-plugin -D
//開啓http服務,webpack.config.js
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
      devServer: {
        contentBase: path.join(__dirname, "dist"),//靜態文件的輸出路徑
        compress: true,//整個服務開啓gzip壓縮
        port: 9000//端口號
      },
     plugins: [
       new CleanWebpackPlugin(['dist']),
       new HtmlWebpackPlugin({
           template:'./app/views/index.html'
       })
     ] 
  };

5.安裝loader

npm install html-loader -D//-D表示開發依賴
npm install node-sass -D//sass-loader的依賴
npm install style-loader css-loader sass-loader -D
npm install vue-loader -D

3、初始化文件

1.初始化app/css/reset.scss文件

//模擬一個reset文件

h1{
  color: #f00;
  .title{
    color: yellow;
  }
}

2.初始化app/js/home/index.vue文件

<template lang="html">
  <div class="home">
    <h1>home</h1>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="css">
.home{
  color: red;
  font-size: 80px;
}
</style>

3.初始化app/js/router/index.js

須要引用vue官方routerwebpack

//1.引入vue,vue-router
import Vue from 'vue';
import Router from 'vue-router';

import Home from '../home/index.vue';

//2.經過 Vue.use() 明確地安裝路由功能
Vue.use(Router);

//3.
export default new Router({
  routes:[{
    path:'/',
    name:'home',
    component:Home
  }]
})

4.安裝vue、vue-router

npm install vue
npm install vue-router

5.初始化app/App.vue，整個app入口

<template lang="html">
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

<style lang="css">
</style>

6.初始化app/main.js,入口js

import Vue from 'vue';
import App from './App.vue'
import router from './router/index.js'

//聲明當前不是生產環境
Vue.config.productionTip = false;

//實例化vue
new Vue({
  el:"#app",
  router,
  components:{
    App
  },
  template:"<App></App>"
})

7.初始化app/views/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>自定義</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

4、Vue.js 構建版本

在 NPM 包的 dist/ 目錄你將會找到不少不一樣的 Vue.js 構建版本。這裏列出了它們之間的差異：vuejs構建版本web

完整版：同時包含編譯器和運行時的版本。vue-router

編譯器：用來將模板字符串編譯成爲 JavaScript 渲染函數的代碼。npm

運行時：用來建立 Vue 實例、渲染並處理虛擬 DOM 等的代碼。基本上就是除去編譯器的其它一切。json

//配置完整版vue.js

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 時需用 'vue/dist/vue.common.js'
    }
  }
}

5、px2rem自適應方案

利用px2rem-loader將css、scss文件中的px轉爲rem，從而實現自適應。緩存

1.安裝

npm install px2rem-loader

//依賴
npm install vue-style-loader

2.配置

//webpack.config.js

module.exports = {
  //...
  module:{
    loaders:[{
      test:/\.vue$/,
      loader:'vue-loader',
      options: {
        loaders: {
          css: 'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8',
          scss: 'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8!sass-loader' // <style lang="scss">
        }
      }
    }
  }
}

參考資料：px2rem-loader、vue-loader預處理器

6、CSS Modules

CSS Modules是一個用於模塊化和組合 CSS 的流行系統。

1.配置

//webpack.config.js

module.exports = {
  //...
  module:{
    loaders:[{
      test:/\.vue$/,
      loader:'vue-loader',
      options: {
         cssModules: {
          localIdentName: '[path][name]---[local]---[hash:base64:5]',
          camelCase: true
        }
      }
    }
  }
}

2.使用

在你的 <style> 上添加 module 屬性：<style module>...</style>，這將爲 css-loader 打開 CSS Modules 模式，生成的 CSS 對象將爲組件注入一個名叫 $style 的計算屬性，你能夠在你的模塊中使用動態 class 綁定：

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

參考資料：CSS Modules

7、提取CSS

將自動提取 *.vue 文件內的 <style> 到單個文件；提取出來的文件在<head>中使用<link>方式引入。

1.安裝

npm install extract-text-webpack-plugin --save-dev

2.配置

// webpack.config.js
const ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  //...
  module:{
    loaders:[{
      test:/\.vue$/,
      loader:'vue-loader',
      options: {
        loaders: {
          css: ExtractTextPlugin.extract({
              use: 'css-loader!px2rem-loader?remUnit=75&remPrecision=8',
              fallback: 'vue-style-loader'
          }),
          scss:  ExtractTextPlugin.extract({
              use: 'css-loader!px2rem-loader?remUnit=75&remPrecision=8!sass-loader',
              fallback: 'vue-style-loader' // <- 這是vue-loader的依賴，因此若是使用npm3，則不須要顯式安裝
         })
        }
      }
    }
  },
  plugins: [
      new ExtractTextPlugin("style.css")
  ]
}

參考資料：提取css文件

若是以爲內容對您有幫助，請點點贊哦~~~一塊兒學習，一塊兒成長(#^.^#)

8、配置開發環境、生產環境

經過webpack的DefinePlugin傳遞參數的不一樣，來區別配置開發環境和生產環境。

1.配置

//webpack.config.js
const webpack = require('webpack');

module.exports = env =>{
    if(!env){
        env = {}//沒參數時，賦值，避免undefined.
    }
    
    let plugins = [
         new CleanWebpackPlugin(['dist']),
         new HtmlWebpackPlugin({
           template:'./app/views/index.html'
         }),
    ];
    
    if(env.production){
      plugins.push(
        //給webpack修改node的全局變量
        new webpack.DefinePlugin({
          'process.env':{
            NODE_ENV:'production'
          }
        }),
        new ExtractTextPlugin("style.css"),
      );
    }
    return {
          //...
          module:{
            loaders:[{
              test:/\.vue$/,
              loader:'vue-loader',
              options: {
               loaders: env.production?{
                    css: ExtractTextPlugin.extract({
                        use: 'css-loader!px2rem-loader?remUnit=75&remPrecision=8',
                        fallback: 'vue-style-loader'
                    }),
                    scss:  ExtractTextPlugin.extract({
                        use: 'css-loader!px2rem-loader?remUnit=75&remPrecision=8!sass-loader',
                        fallback: 'vue-style-loader' // <- 這是vue-loader的依賴，因此若是使用npm3，則不須要顯式安裝
                   })
                 }:{
                   css:'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8',
                   scss:'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8!sass-loader'
                 }
              }
            }
          },
          plugins,
    }
}

9、配置npm scripts

  • npm test
  • npm run watch
  • npm start
  • npm run build
//package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open",
    "build": "webpack --env.production"
  },
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程