1、初始我的项目

mkdir vue-test & cd vue-test

2、安装包

npm init

一路回车，创立package.json，外面的name能够视状况本人更改

3、思考通过webpack按需安装包（因为vue-cli装置了很多额定的包）

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D

4、调整目录构造，新建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.resolveconst 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