简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  web前端  >  Vue前端架構學習（一）

Vue前端架構學習（一）

小云云
小云云原創
2018-02-02 13:53:512220瀏覽

本文我們主要跟大家分享Vue前端架構學習（一），這是一篇從零開始做Vue前端架構的分享，希望能幫助到大家。

想想也已經做過不少架構的專案了，有基於vue，基於react，基於thinkPHP，基於laravel的。做多了，也就對現有的架構有各種想法，有好的，有壞的，總之，用起來還是不爽。 vue-cli雖然可以很快地建置使用，尤其是vue-cli v3.0，把webpack都封進@vue/cli的sdk裡了，用起來更加乾淨、簡潔。

好了，介紹完畢，接下來，我就從零開始，一步一步建起前後端完全分離的前端架構了。

步驟

由於要介紹的很多，全寫在一篇裡，有些太長了。

所以，我會分成：

  1. 建立開發環境下的webpack設定檔

  2. 設定eslint、babel、 postcss

  3. 建立專案檔案、目錄架構

  4. #透過koa實作本機資料介面模擬

  5. 建立發布環境下的webpack設定檔

  6. 建立測試環境下的webpack設定檔、以及測試案例（TODO）

  7. ##自動初始化構建項目（TODO）

這七篇來分別介紹。

開發

一、初始化專案

  1. 建立專案資料夾

我們就叫

vue-construct吧

  1. 初始化git

git init

    2. ##初始化npm


npm init

#建立專案檔

為了能讓webpack跑起來，而不是一口氣只講配置而不運行一下，那樣未免有些空洞，所以我們先創建一點項目文件和目錄。 npm i -S vue vue-router我們將專案程式碼相關檔案都放在名為app的資料夾下。我先都創建完，然後一個個介紹。 
├── app
│   ├── app.vue
│   ├── common
│   │   ├── img
│   │   ├── js
│   │   └── scss
│   ├── index.html
│   ├── index.js
│   ├── router
│   │   └── index.js
│   └── views
│       └── home
│           └── index.vue
├── .gitignore
├── package-lock.json
├── package.json
└── webpack.config.js
node_modules的話就忽略了。 「資料夾#app.vue#作為vue的主檔案common裡面放公共的程式碼index.html頁面範本檔案index.js專案主入口檔案
在這之前我們先安裝兩個套件：vue、vue-router， 。
#app.vue

router

放vue對應的router檔

  1. views

    2. 放檢視檔

.gitignore

忽略node_module

咱們暫且不關係這些檔案裡的具體程式碼是什麼，等webpack配置完再說。

二、設定webpack.config.js

  1. 安裝一系列的套件：

為了webpack的運行，需要安裝

webpack
webpack-dev-server
為了處理vue單頁文件，安裝：
    vue-loader
  1. 為了處理scss文件並從js中抽離，安裝：

    node-sass
style-loader
css-loader
sass-loader
vue-style-loader
postcss
postcss-loader
autoprefixer
extract-text-webpack-plugin
    為了處理圖片和字體文件，安裝：
    2. file-loader
url-loader
  2. 為了支援進階語法-babel，安裝：

    babel
babel-loader
babel-plugin-syntax-dynamic-import
babel-plugin-transform-object-rest-spread
babel-polyfill
babel-preset-env
    為了驗證程式碼格式-eslint，安裝：
    3. eslint
eslint-loader
eslint-plugin-html
babel-eslint

  3. #設定webpack .config.js檔案

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// 为了抽离出两份CSS，创建两份ExtractTextPlugin
// base作为基础的css，基本不变，所以，可以抽离出来充分利用浏览器缓存
// app作为迭代的css，会经常改变
const isProduction = process.env.NODE_ENV === 'production'
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractBaseCSS =
  new ExtractTextPlugin(
    {
      filename:'static/css/base.[chunkhash:8].css',
      allChunks: true,
      disable: !isProduction // 开发环境下不抽离css
    }
  )
const extractAppCSS
  = new ExtractTextPlugin(
    {
      filename:'static/css/app.[chunkhash:8].css',
      allChunks: true,
      disable: !isProduction // 开发环境下不抽离css
    }
  )

// 减少路径书写
function resolve(dir) {
  return path.join(__dirname, dir)
}

// 网站图标配置
const favicon = resolve('favicon.ico')

// __dirname: 总是返回被执行的 js 所在文件夹的绝对路径
// __filename: 总是返回被执行的 js 的绝对路径
// process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径
const config = {
  // sourcemap 模式
  devtool: 'cheap-module-eval-source-map',
  // 入口
  entry: {
    app: [
      'babel-polyfill', // 这里是配合babel-present-env导入的动态babel-polyfill,因此npm需dev依赖
      resolve('app/index.js')
    ]
  },
  // 输出
  output: {
    path: resolve('dev'),
    filename: 'index.bundle.js'
  },
  resolve: {
    // 扩展名，比如import 'app.vue'，扩展后只需要写成import 'app'就可以了
    extensions: ['.js', '.vue', '.scss', '.css'],
    // 取路径别名，方便在业务代码中import
    alias: {
      api: resolve('app/api/'),
      common: resolve('app/common/'),
      views: resolve('app/views/'),
      components: resolve('app/components/'),
      componentsBase: resolve('app/componentsBase/'),
      directives: resolve('app/directives/'),
      filters: resolve('app/filters/'),
      mixins: resolve('app/mixins/')
    }
  },
  // loaders处理
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [resolve('app')],
        loader: [
          'babel-loader',
          'eslint-loader'
        ]
      },
      {
        test: /\.vue$/,
        exclude: /node_modules/,
        loader: 'vue-loader',
        options: {
          extractCSS: true,
          loaders: {
            scss: extractAppCSS.extract({
              fallback: 'vue-style-loader',
              use: [
                {
                  loader: 'css-loader',
                  options: {
                    sourceMap: true
                  }
                },
                {
                  loader: 'postcss-loader',
                  options: {
                    sourceMap: true
                  }
                },
                {
                  loader: 'sass-loader',
                  options: {
                    sourceMap: true
                  }
                }
              ]
            })
          }
        }
      },
      {
        test: /\.(css|scss)$/,
        use: extractBaseCSS.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        })
      },
      {
        test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 8192,
          name: isProduction
            ? 'static/img/[name].[hash:8].[ext]'
            : 'static/img/[name].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 8192,
          name: isProduction
            ? 'static/font/[name].[hash:8].[ext]'
            : 'static/font/[name].[ext]'
        }
      }
    ]
  },
  plugins: [
    // html 模板插件
    new HtmlWebpackPlugin({
      favicon,
      filename: 'index.html',
      template: resolve('app/index.html')
    }),
    // 抽离出css
    extractBaseCSS,
    extractAppCSS,
    // 热替换插件
    new webpack.HotModuleReplacementPlugin(),
    // 更友好地输出错误信息
    new FriendlyErrorsPlugin()
  ],
  devServer: {
    proxy: {
      // 凡是 `/api` 开头的 http 请求，都会被代理到 localhost:7777 上，由 koa 提供 mock 数据。
      // koa 代码在 ./mock 目录中，启动命令为 npm run mock。
      '/api': {
        target: 'http://localhost:7777', // 如果说联调了，将地址换成后端环境的地址就哦了
        secure: false
      }
    },
    host: '0.0.0.0',
    port: '9999',
    disableHostCheck: true, // 为了手机可以访问
    contentBase: resolve('dev'), // 本地服务器所加载的页面所在的目录
    // historyApiFallback: true, // 为了SPA应用服务
    inline: true, //实时刷新
    hot: true  // 使用热加载插件 HotModuleReplacementPlugin
  }
}

module.exports = {
  config: config,
  extractBaseCSS: extractBaseCSS,
  extractAppCSS: extractAppCSS
}
總結

這篇主要就做了三件事：

#####建立簡單的專案結構############安裝了這篇，以及之後要用到npm套件############設定開發環境的Webpack###### ######相關推薦：#########VUE前端cookie簡單操作實例分享#######

以上是Vue前端架構學習（一）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：VsCode完成VueJs專案的教學下一篇：VsCode完成VueJs專案的教學

相關文章

看更多