共计 4253 个字符，预计需要花费 11 分钟才能阅读完成。
1、初始我的项目
mkdir vue-test & cd vue-test2、安装包
npm init一路回车，创立 package.json，外面的 name 能够视状况本人更改
3、思考通过 webpack 按需安装包（因为 vue-cli 装置了很多额定的包）
npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D4、调整目录构造，新建 assets、example、packages、src、webpack
assets 寄存动态资源，如 images、less、scss、font 等
example 寄存示例
packages 寄存行将开发的 vue 组件
src 寄存启动我的项目的入口 js 等
webpack 寄存不同配置
5、思考 webpack 配置
（1）vue 我的项目，必然须要装置 vue、vue-loader、vue-template-compiler，具体参考 https://vue-loader.vuejs.org/（这里有一个留神点：须要装置 vue@2 和 vue-loader@15，更高版本的话，就须要做 vue3 的解决了，目前尚未摸索 vue3 的相干配置）
（2）vue 组件中蕴含了 less、scss 等，必然须要装置 vue-style-loader、css-loader、less、less-loader、sass、sass-loader、node-sass
（3）我的项目中有 js 文件，须要反对 es6 语法，必然须要装置 babel-loader
6、在 /webpack 目录下，新建 develop.js
const webpack = require('webpack')
const path = require('path')
const resolve = path.resolve
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {VueLoaderPlugin} = require('vue-loader')
module.exports = {
mode: 'development',
mode: 'none',
entry: resolve(__dirname, '../src/index'),
output: {clean: true},
module: {
rules: [
{
test: /\.vue$/i,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{test: /\.s[ac]ss$/,
use: ['vue-style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.less$/,
use: ['vue-style-loader', 'css-loader', 'less-loader']
},
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
},
{test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource'
}
]
},
devtool: 'inline-source-map',
devServer: {static: './dist'},
resolve: {
alias: {'@': process.cwd()
}
},
plugins: [new VueLoaderPlugin(),
new HtmlWebpackPlugin({template: resolve(__dirname, '../src/index.html')
})
]
}
具体配置，能够参考 webpack 官网，https://webpack.docschina.org…
7、新建入口文件
要晓得，webpack 只是一个打包工具，依据入口 js 文件（即 entry 配置的内容），把 import 的各种资源，比方.vue 文件或者图片等等整合到一起，最初以 js 文件输入（即配置 output）。
那么，咱们须要到 /src 目录下，新建入口文件 index.js、index.html、index.vue。
（1）index.js(entry 配置的入口文件)
import Vue from 'vue'
import App from "./index.vue"
new Vue({
el: '#app',
render: (h) => h(App)
})这个 js 文件，大家应该很相熟吧，跟 vue-cli 初始化的我的项目中，src/main.js 是不是一样的？
（2）index.html（次要是配合 html-webpack-plugin 组件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>这个 html 文件，大家有没有感觉也很相熟，跟 vue-cli 初始化的我的项目中，public/index.html 是不是一样？
（3）index.vue（vue 我的项目的主文件）
<template>
<div>this is my app</div>
</template>
<script>
export default {data(){return {}
}
}
</script>
<style>
</style>这不就是，src/App.vue 吗？
这下终于明确，为啥 vue-cli 有这三个文件了，原来是为了配合 webpack，当作我的项目的入口文件、
8、批改 package.json
"main": "dist/index.js",
"scripts": {
"dev": "webpack serve --open --config webpack/develop.js",
"build": "webpack --config webpack/develop.js"
},次要是为了执行 npm run dev 和 npm run build 等
9、启动我的项目
npm run dev（1）这时能够看到报错
还须要装置 @babel/core，之后从新执行 npm run dev 启动我的项目，浏览器会主动关上一个新的标签 http://localhost:8081/
（2）浏览器关上开发者工具，F12 里有个报错
百度了一圈，https://stackoverflow.com/que…
须要装置 npm i process -D，并且 webpack 批改配置
plugins: [
...
new webpack.ProvidePlugin({process: 'process/browser'})
]当然，如同更好的解决形式是装置 cross-env
这时候，浏览器中应该曾经呈现内容了。
10、开发组件（以 element-ui 为根底）
当初一个简略的 vue 曾经跑起来了。后续写组件，大家应该驾轻就熟了吧？
npm i element-ui同时，批改 index.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)在 /packages 目录下，新建 diy-int.vue，用来解决 input 输入框 只能输出整数
<template>
<span>
<el-input
v-model="inputVal"
:placeholder="` 请输出 ${$attrs.title ||''}`"v-bind="$attrs"@input="(val) => triggerInput($attrs, val)"
>
<template slot="prepend"><slot name="prepend"></slot></template>
<template slot="append"><slot name="append"></slot></template>
</el-input>
</span>
</template>
<script>
export default {
name: 'diy-int',
model: {
event: 'change',
prop: 'value'
},
props: {value: { type: [Number, String], default: '' }
},
components: {},
computed: {
inputVal: {get () {return this.value},
set (value) {this.$emit('change', value)
}
}
},
data () {
return {visible: false}
},
methods: {triggerInput ($attrs, val) {let result = String(val)
.replace(/[^\d]/g, '') // 只能填数字
.replace(/^0+$/, '0') // 全副填写 0 时只显示一个 0
.replace(/^0(\d{1})/g, '$1') // 以 0 结尾的整数，只展现整数局部;
if ($attrs.max) {if (Number(result) > $attrs.max) {result = $attrs.max}
}
if ($attrs.min) {if (Number(result) < $attrs.min) {result = $attrs.min}
}
this.inputVal = result
}
},
mounted () {}
}
</script>
<style lang="less" scoped></style>
去 src/index.vue 中引入组件
import DiyInt from "@/packages/diy-int.vue"
export default {
...
components: {DiyInt},
...
}
<diy-int v-model="int" :max="100" :min="5">
<el-button slot="append" icon="el-icon-edit"></el-button>
</diy-int>你会发现，你自定义的一个组件就实现了。
11、执行 npm run build 并公布 npm
