摘要:原文地址对于没有了解过的童鞋,建议先去看看官方的教程传送门新版本的新特性插件使用的插件,可以很快的搭建一个项目的结构。使用时直接引入即可。的界面让管理项目变得更加简单。如迁移过程中有任何疑问,可以留言一起探讨。
原文地址
新版本的新特性 1. 插件</>复制代码
对于没有了解过 vue-cli3 的童鞋,建议先去看看官方的教程: 传送门
使用 cli 的插件,可以很快的搭建一个项目的结构。如 axios 的插件 vue-cli-plugin-axios,可以自动创建一个带有 request 和 resonpose 的拦截器的 axios 的实例的文件。使用时直接引入即可。
2. 减少配置</>复制代码
ps:一般插件新建的文件都放在 src/plugin 文件夹下。
vue-cli3 中内置了很多 webpack 的配置,如 babel,各个 css 预编译器,几乎只需要安装完相对应的 loader 即可开箱即用,无需过多的配置即可直接开发。
3. 图形化自带的 GUI 界面直接将上手成本置为 0。在终端中运行命令: vue ui 打开浏览器中就可以愉快的使用 GUI 进行项目管理。
vue-cli2 的迁移 src直接覆盖即可。
static直接复制到新项目的 public/static 即可。
index.html复制覆盖至 public 目录下的 index.html 即可。
CDN 配置旧版的可以看这里:记一次使用 vue-admin-template 的优化历程
新版的基本不用怎么修改即可直接使用:
</>复制代码
const webpack = require("webpack")
const path = require("path")
const HtmlWebpackIncludeAssetsPlugin = require("html-webpack-include-assets-plugin")
const Vue = require("vue")
const Buefy = require("buefy/package.json")
const AV = require("leancloud-storage")
const externals = {
// "element-ui":"ELEMENT"
}
const assets = [
{ path: "https://unpkg.com/buefy@0.6.6/lib/buefy.min.css", type: "css"}
]
console.log(process.env.NODE_ENV, AV.version)
const isProd = process.env.NODE_ENV === "production"
if (isProd) {
externals["vue"] = "Vue"
externals["buefy"] = "Buefy"
externals["leancloud-storage"] = "AV"
// externals["element-ui"] = "ELEMENT"
assets.push(
{ path: `https://lib.baomitu.com/vue/${Vue.version}/vue.min.js`, type: "js" },
{ path: `https://unpkg.com/buefy@${Buefy.version}/lib/index.js`, type: "js" },
{ path: `https://cdn.jsdelivr.net/npm/leancloud-storage@${AV.version}/dist/av-min.js`, type: "js" },
)
}
const plugins = [{
name: "html-assets",
func: HtmlWebpackIncludeAssetsPlugin,
options: {
assets,
// 是否在 webpack 注入的 js 文件后新增?true 为 append, false 为 prepend。
// 生产环境中,这些 js 应该先加载。
append: !isProd,
publicPath: "",
}
}, {
name: "dll",
func: webpack.DllReferencePlugin,
options: {
context: path.join(__dirname, "../"),
manifest: require("../configs/vendor-manifest.json")
}
}]
module.exports = {
externals,
plugins
}
DLL Plugin
旧版的可以看这里:记一次使用 vue-admin-template 的优化历程
主要还是 webpack4 只需要配置一个 mode: "production" 即可,无需再额外配置繁琐的 webpack.optimization。
package.json 中添加新的命令:
</>复制代码
{
"build:dll": "webpack --config configs/dll.js --mode production"
}
再安装新的命令包,让 yarn/npm 可以直接使用 webpack 命令:
</>复制代码
$ yarn add -D webpack-command
新增 configs/dll.js 文件:
</>复制代码
const webpack = require("webpack");
const path = require("path");
const utils = {
assetsPath: function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === "production"
// 生产环境下的 static 路径
? "static"
// 开发环境下的 static 路径
: "static"
return path.posix.join(assetsSubDirectory, _path)
}
}
function resolve(dir) {
return path.join(__dirname, "..", dir)
}
const vendors = [
// 这里填写需要打进 dll 的包名。
];
const context = path.join(__dirname, "../")
const webpackConfig = {
// 无需配置 webpack.optimization
mode: "production",
context,
output: {
path: path.join(__dirname, "../public/js/"),
filename: "[name].dll.js",
library: "[name]_[hash]",
},
entry: {
"vendor": vendors,
},
plugins: [
new webpack.DllPlugin({
context,
path: path.join(__dirname, ".", "[name]-manifest.json"),
name: "[name]_[hash]",
})
],
module: {
// 如用不上可以删除。
rules: [{
test: /.js$/,
loader: "babel-loader",
include: [resolve("src"), resolve("test"), resolve("node_modules/webpack-dev-server/client")]
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: "url-loader",
options: {
limit: 10000,
name: utils.assetsPath("img/[name].[hash:7].[ext]")
}
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
loader: "url-loader",
options: {
limit: 10000,
name: utils.assetsPath("media/[name].[hash:7].[ext]")
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: "url-loader",
options: {
limit: 10000,
name: utils.assetsPath("fonts/[name].[hash:7].[ext]")
}
}
]
}
};
module.exports = webpackConfig
其他配置
vue-cli3 的其他所有 webpack 都可以通过 vue.config.js 进行配置,需要手动新建。
vue.config.js
</>复制代码
const {externals, plugins} = require("./config/cdn")
module.exports = {
baseUrl: process.env.NODE_ENV === "production"
? "/PRODUCTION/"
: "/",
chainWebpack: config => {
// use webpack-chain instead of webpack.config
// 注入 cdn 和 dll 插件
plugins.forEach(plugin => {
config.plugin(plugin.name)
.use(plugin.func, [plugin.options])
})
// 使用 externals.
config.externals(externals)
}
}
推荐在 vue.config.js 中使用 webpack-chain 进行配置
安装尤大的 pug-plain-loader: yarn add -D pug-plain-loader
chainWebpack 添加:
</>复制代码
config.module
.use("pug").test(/.pug$/)
.end()
只需要安装 sass-loader 即可。
</>复制代码
如需使用 fast-sass-loader 代替,则需要修改配置:
</>复制代码
;["scss", "sass"].forEach(style => {
["vue", "vue-modules", "normal-modules", "normal"].forEach(one => {
config.module.rule(style)
.oneOf(one)
.use("sass-loader")
.loader("fast-sass-loader")
.end()
})
})
未研究出,卒。
总结不得不说,新版的 cli 真的很方便新手,配合 webpack-chain 也可以清晰明了的去配置 webpack,只是兼容性需要一步步去摸索。GUI 的界面让管理 vue 项目变得更加简单。
如迁移过程中有任何疑问,可以留言一起探讨。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/98007.html
摘要:安装与初始化过程中遇到的坑,以此记录。安装依赖于,地址对应自己的系统选择相应的版本即可,这里推荐下载版本直接安装。至此,项目构建成功,如果遗漏或错误,恳请指出并加以修改。 vue安装与初始化过程中遇到的坑,以此记录。 1.安装vue依赖于node.js,地址:http://nodejs.cn/download/showImg(https://segmentfault.com/img/b...
摘要:现在执行如上查询,结果为使用内连接和左连接的两条语句,执行结果保持一致,都能显示出各组最大值的多行记录。子句常与聚集函数联用,此时聚集函数以基本组为计算对象。 这里探讨了分组查询最大值(group-wise-max)的问题。涉及到 SQL 查询语句中的 GROUP BY 子句及连接(JOIN)操作。 问题 本文缘起于 SegmentFault上 的一个问题:http://segment...
摘要:我可以明确告诉你这不是,但它可以用解释器运行。这种黑魔法,还要从说起。提案者设想使用一种特殊的文件首注释,用于指定代码的编码。暴露了一个函数,用于注册自定义编码。所谓的黑魔法其实并不神秘,照猫画虎定义好相应的接口即可。 首发于我的博客,转载请注明出处 写在前面 本文为科普文 本文中的例子在 Ubuntu 14.04 / Python 2.7.11 下运行成功,Python 3+ 的接...
阅读 1205·2023-04-26 02:38
阅读 1498·2021-11-22 09:34
阅读 1202·2021-09-26 10:19
阅读 3197·2019-08-29 17:15
阅读 3542·2019-08-29 12:27
阅读 1733·2019-08-26 13:51
阅读 1885·2019-08-26 13:47
阅读 1031·2019-08-26 12:20
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要