本文我们主要和大家分享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的运行，需要安装
webpack webpack-dev-server
为了处理vue单页文件，安装：
vue-loader
为了处理scss文件并从js中抽离，安装：
node-sass style-loader css-loader sass-loader vue-style-loader postcss postcss-loader autoprefixer extract-text-webpack-plugin
为了处理图片和字体文件，安装：
file-loader url-loader
为了支持高级语法-babel，安装：
babel babel-loader babel-plugin-syntax-dynamic-import babel-plugin-transform-object-rest-spread babel-polyfill babel-preset-env
为了验证代码格式-eslint，安装：
eslint eslint-loader eslint-plugin-html babel-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
相关推荐：
Atas ialah kandungan terperinci Vue前端架构学习（一）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Adakah python bahagian hadapan atau belakang?
Cara melaksanakan pemesejan segera pada bahagian hadapan
Perbezaan antara front-end dan back-end
Pengenalan kepada hubungan antara php dan front-end
asp fail apa
Sepuluh kedudukan pertukaran mata wang digital teratas
Bagaimana untuk memasukkan pemacu d dengan cmd
Bagaimana untuk menyelesaikan masalah bahawa Apple tidak boleh memuat turun lebih daripada 200 fail
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
