Vue前端架构学习（一）

本文我们主要和大家分享vue前端架构学习（一），这是一篇从零开始做vue前端架构的分享，希望能帮助到大家。

想想也已经做过不少架构的项目了，有基于vue，基于react，基于thinkPHP，基于laravel的。做多了，也就对现有的架构有各种想法，有好的，有坏的，总之，用起来还是不爽。vue-cli虽然可以很快地构建并使用，尤其是vue-cli v3.0，把webpack都封进@vue/cli的sdk里了，用起来更加干净、简洁。

好了，介绍完毕，接下来，我就从零开始，一步一步建起前后端完全分离的前端架构了。

步骤

由于要介绍的很多，全写在一篇里，有些太长了。

所以，我会分为：

立即学习“前端免费学习笔记（深入）”；

创建开发环境下的webpack配置文件

配置eslint、babel、postcss

创建项目文件、目录架构

通过koa实现本地数据接口模拟

创建发布环境下的webpack配置文件

创建测试环境下的webpack配置文件、以及测试用例 （TODO）

自动初始化构建项目（TODO）

这七篇来分别介绍。

开发

一、初始化项目

创建项目文件夹

我们就叫vue-construct吧

初始化git

git init

初始化npm

npm init

创建项目文件

为了能让webpack跑起来，而不是一口气只讲配置而不运行一下，那样未免有些空洞，所以我们先创建一点项目文件和目录。
在这之前我们先安装两个包：vue、vue-router， 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项目主入口文件router放vue对应的router文件views放视图文件.gitignore忽略node_module

咱们暂且不关系这些文件里的具体代码是什么，等webpack配置完再说。

二、配置webpack.config.js

安装一系列的包：

为了webpack的运行，需要安装

webpackwebpack-dev-server

登录后复制

为了处理vue单页文件，安装：

vue-loader

登录后复制

为了处理scss文件并从js中抽离，安装：

node-sassstyle-loadercss-loadersass-loadervue-style-loaderpostcsspostcss-loaderautoprefixerextract-text-webpack-plugin

登录后复制

为了处理图片和字体文件，安装：

file-loaderurl-loader

登录后复制

为了支持高级语法-babel，安装：

babelbabel-loaderbabel-plugin-syntax-dynamic-importbabel-plugin-transform-object-rest-spreadbabel-polyfillbabel-preset-env

登录后复制

为了验证代码格式-eslint，安装：

eslinteslint-loadereslint-plugin-htmlbabel-eslint

登录后复制

配置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前端架构学习（一）的详细内容，更多请关注【创想鸟】其它相关文章！