第一步

1.新建文件夹

2.创建两文件夹src和dist，src写组件,dist放的是打包后的src

3.dist下新建index.html

接下来引入js文件，这里我没用webpack将所以js打包到一个js（bundle.js）文件中，所以引入的是打包后js的文件（此时我还并没有打包和创建）

4.引入的是打包后js的文件

6.src下创建入口文件main.js

第二步 安装

  npm init
  npm install vue element-ui axios
  npm install -D webpack webpack-cli vue-loader vue-template-compiler sass sass-loader css-loader css-loader style-loader babel-loader @babel/core @babel/preset-env`

安装工具解释：

1.安装vue

npm install vue

2.安装element-ui

npm install element-ui

3.安装打包工具webpack

npm install webpack webpack-cli

4.安装.vue代码转为.js代码工具

npm install vue-loader

5.安装.vue转换html工具

npm install vue-template-compiler

6.安装sass和sass转css,然后处理css工具

npm install sass sass-loader css-loader css-loader

7.处理完css再添加回html

npm install style-loader

8.js太新的语法转换成兼容性好的老语法babel-loader、核心库@babel/core

npm install babel-loader @babel/core

9.babel-loader的预设配置

npm install @babel/preset-env

安装后目录：

第三步 配置webpack.config.js

const path = require('path')
const {VueLoaderPlugin}   = require('vue-loader') 

module.exports = {
    entry: './src/main.js',
    output: { 
        path: path.resolve(__dirname + '\\dist',
        filename: 'bundle.js', 
    },
    module: {
        rules: [
            { test: /\.vue$/, use: 'vue-loader' }, 
            { test: /\.s[ca]ss$/, use: ['style-loader', 'css-loader', 'scss-loader'] },
            {                                 
                test: /\.m?js$/,
                user: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preser-env']
                    }
                }
            },
            {text:/\.(png|jpg?g|gif|svg|webp)$/,type:'asset/resource' },
        ]
    },
    plugins: [
    new VueLoaderPlugin(),
    ]
}

第四步

.\node_modules\.bin\webpack

第五步（和四功能一样都是打包）

package.json

 "scripts": {
    "serve": "webpack --mode=development --watch",
    "bulid": "webpack --mode=production"
  },

npm run serve

注意：这里运行完可能有错，错误原因 preset-env打包成了@babel/preset-preser-env,

解决：webpack.config.js 的js规则改成这样

再次运行

第六步

1.npm install vue-router

2.src 文件夹下 新建router文件夹 ，再在router下建index.js

3.src文件夹下新建Home.vue和About.vue

import VueRouter from 'vue-router'
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
import Vue from 'vue'

Vue.use(VueRouter)

const router = new VueRouter({
    routes:[
        {
            path:'/',
            component: Home
        },
        {
            path:'/about',
            component: About
        }
    ]
})

export default router

4. main.js中导入router.js

5. App.vue中

第七步