本文我們主要跟大家分享Vue前端架構學習（一），這是一篇從零開始做Vue前端架構的分享，希望能幫助到大家。
想想也已經做過不少架構的專案了，有基於vue，基於react，基於thinkPHP，基於laravel的。做多了，也就對現有的架構有各種想法，有好的，有壞的，總之，用起來還是不爽。 vue-cli雖然可以很快地建置使用，尤其是vue-cli v3.0，把webpack都封進@vue/cli的sdk裡了，用起來更加乾淨、簡潔。
好了，介紹完畢，接下來，我就從零開始，一步一步建起前後端完全分離的前端架構了。
由於要介紹的很多，全寫在一篇裡，有些太長了。
所以，我會分成：
建立開發環境下的webpack設定檔
設定eslint、babel、 postcss
建立專案檔案、目錄架構
#透過koa實作本機資料介面模擬
建立發布環境下的webpack設定檔
建立測試環境下的webpack設定檔、以及測試案例（TODO）
vue-construct吧
git init
npm init
#建立專案檔
| 在這之前我們先安裝兩個套件：vue、vue-router， | npm i -S vue vue-router。 | 我們將專案程式碼相關檔案都放在名為
|---|---|
| #app.vue | |
| #app.vue | #作為vue的主檔案 |
| common | 裡面放公共的程式碼 |
| index.html | 頁面範本檔案 |
| index.js | 專案主入口檔案 |
router
views
.gitignore
忽略node_module
咱們暫且不關係這些檔案裡的具體程式碼是什麼，等webpack配置完再說。 二、設定webpack.config.jswebpack webpack-dev-server
vue-loader
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-loader babel-plugin-syntax-dynamic-import babel-plugin-transform-object-rest-spread babel-polyfill babel-preset-env
eslint eslint-loader eslint-plugin-html babel-eslint
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
}以上是Vue前端架構學習（一）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
