Maison > Article > interface Web > Apprentissage de l'architecture frontale Vue (1)
Apprentissage de l'architecture frontale Vue (1)
- 小云云original
- 2018-02-02 13:53:512220parcourir
Dans cet article, nous partageons principalement avec vous l'apprentissage de l'architecture frontale de Vue (1). J'espère que cela pourra aider tout le monde.
Pensez-y, j'ai déjà réalisé beaucoup de projets architecturaux, certains basés sur vue, basés sur React, basés sur thinkPHP, basés sur Laravel. Si vous en faites trop, vous aurez diverses idées sur l'architecture existante, certaines bonnes et d'autres mauvaises. Bref, ce n'est toujours pas confortable à utiliser. Bien que vue-cli puisse être construit et utilisé rapidement, en particulier vue-cli v3.0, le webpack est inclus dans le @vue/cli SDK, ce qui le rend plus propre et plus concis à utiliser.
D'accord, l'introduction est terminée. Ensuite, je vais repartir de zéro et construire une architecture front-end avec une séparation complète du front-end et du back-end étape par étape.
Étapes
Comme il y a beaucoup de choses à présenter, je vais tout écrire dans un seul article, ce qui est trop long.
Donc, je vais le diviser en :
Créer le fichier de configuration du webpack dans l'environnement de développement
Configurer eslint, babel, postcss
Créer des fichiers de projet et une structure de répertoires
Implémenter la simulation d'interface de données locale via koa
Créer un fichier de configuration Webpack dans l'environnement de version
Créer un fichier de configuration Webpack dans l'environnement de test et les cas de test (TODO)
Initialiser automatiquement le projet de build (TODO)
Ces sept articles seront présentés séparément.
Développement
1. Initialiser le projet
Créer le dossier du projet
Nous l'appellerons vue-constructBar
Initialiser git
git init
-
Initialiser npm
npm init
Créer un fichier de projet
Afin de faire fonctionner Webpack, au lieu de simplement parler à ce sujet d'un seul coup Le configurer sans l'exécuter serait un peu vide, alors créons d'abord quelques fichiers et répertoires de projet.
Avant cela, nous installons d'abord deux packages : vue, vue-router, npm i -S vue vue-router.
Nous mettons tous les fichiers liés au code du projet dans un dossier nommé app. Je vais d'abord les créer tous, puis les présenter un par un.
├── 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 seront ignorés.
| 文件/文件夹 | 用途 |
|---|---|
| app.vue | 作为vue的主文件 |
| common | 里面放公共的代码 |
| index.html | 页面模板文件 |
| index.js | 项目主入口文件 |
| router | 放vue对应的router文件 |
| views | 放视图文件 |
| .gitignore | 忽略node_module |
Nous ne nous soucions pas du code spécifique de ces fichiers pour l'instant, nous en reparlerons une fois le webpack configuré.
2. Configurez webpack.config.js
Installez une série de packages :
Afin d'exécuter webpack, il est nécessaire d'installer
webpack webpack-dev-server
Pour traiter les fichiers d'une seule page de vue, installez :
vue-loader
Pour traiter les fichiers scss et les extraire de js, installez :
node-sass style-loader css-loader sass-loader vue-style-loader postcss postcss-loader autoprefixer extract-text-webpack-plugin
Pour gérer les fichiers d'images et de polices, installez :
file-loader url-loader
Pour prendre en charge la syntaxe avancée - babel, installez :
babel babel-loader babel-plugin-syntax-dynamic-import babel-plugin-transform-object-rest-spread babel-polyfill babel-preset-env
Pour vérifier le format du code - eslint, installez :
eslint eslint-loader eslint-plugin-html babel-eslint
Configurer le fichier 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
}
Résumé
Cet article fait principalement trois choses :
Créer une structure de projet simple
Après avoir installé cet article, vous devrez utiliser le package npm à l'avenir
-
Configuration de Webpack pour l'environnement de développement
Recommandations associées :
Partage d'exemple d'opération simple de cookie frontal VUE
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!