从0到1搭建自己的脚手架vue3

工程技术 / 从0到1搭建自己的脚手架vue3
Word count: 1.9k   |   Reading time≈ 9 min

搭建vue项目脚手架

1.所以的网站都需要一个页面，所以创建第一个.html文件（index.html）

<!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>vue-cli-start</title>
</head>
<body>
    <div id="app"></div>
   <!-- 引入打包后的js文件 -->
    <script src="bundle.js"></script> 
</body>
</html>

2.创建src和dist文件夹

因为index.html需要引入打包后的bundle.js文件，所以将index.js放到了dist目录下

3.创建入口文件main.js

我们需要引入vue实例，但是现在我们没有vue包，所以要先下载vue

我们也可以一次性下载vue所需要的依赖

npm i vue element-ui axios

4.安装开发依赖

npm i -D webpack webpack-cli vue-loader vue-template-compiler sass sass-loader css-loader style-loader babel-loader @babel/core @babel/preset-env

如果项目文件没有package.json,那么

npm init -y

5.创建webpack.config.js并配置(根目录下和package.json同一目录创建)

//webpack.config.js基本配置模板
module.exports = {
    //入口，表示从那个文件开始解析
    entry:'',
    //出口，表示输出文件位置和信息
    output:{
        path:'',
        filename:''
    },
    //模块，定义匹配规则和转换loader
    module:{
        rules:[
            {test:/\.vue$/,use:'vue-loader'},
            {}
        ]
    },
    //插件,给予webpack更丰富的功能
    plugins:[
        //实例化
        new PluginA()
    ]

}

基本配置完成的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','sass-loader']},
            {
                test:/\.m?js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env'],
                    }
                }
            },
            //老语法
            // {test:/\.(png|jpe?g|svg|gif|webp)$/,use:{loader:'file-loader',options:{esModule:'false'}}}
            {test:/\.(png|jpe?g|svg|gif|webp)$/,type:'asset/resource'},
        ]
    },
    plugins:[
        new VueLoaderPlugin()
    ]
}

6.编辑书写main.js文件和App.vue

//main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

//App.vue
<template>
    <div>
        艺术码畜博客‘https://mengfeng.github.io/’
    </div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
</style>

7.那么我们现在应该可以运行所配置的代码了

现在出现一个问题，直接执行webpack命令会找不到webpack命令，虽然我们下载了webpack-cli，但是只是存在于./node_modules/.bin里面

那我们执行./node_modules/.bin/webpack也是可以打包的，但是我们每次执行这么长的命令不是很方便，所以通过配置package.json文件来简化命令

{
  "name": "vue-cli-start",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts":{
    //--mode=development为开发环境，速度较快，上线可以配置为生产环境，会压缩，优化代码
    //--watch为监听代码变化，只要代码变化，会重新编译
    //build是生产环境的打包
    "serve":"webpack --mode=development --watch",
    "build":"webpack --mode=production"
  },
 "dependencies": {
    "axios": "^1.1.3",
    "element-ui": "^2.15.10",
    "vue": "^3.2.41"
  },
  "devDependencies": {
    "@babel/core": "^7.20.2",
    "@babel/preset-env": "^7.20.2",
    "babel-loader": "^9.1.0",
    "css-loader": "^6.7.1",
    "sass": "^1.56.0",
    "sass-loader": "^13.1.0",
    "style-loader": "^3.3.1",
    "vue-loader": "^17.0.1",
    "vue-template-compiler": "^2.7.13",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

当我们执行npm run serve

npm run serve

表示我们编译成功了，我们现在可以试着运行一下index.html

恭喜，目前为止已经没有什么问题了！！！基础的vue脚手架就完成了（目前只是一个页面）

8.我们需要多个页面的时候，就需要其他依赖了

根据下面的配置来修改自己的代码，可能下面的代码于上面的不同，但效果是一样的

npm i vue-router

9.创建route文件夹和pages文件夹

10.编辑App.vue和route下的index.js文件

//App.vue
<template>
    <div id="nav">
        <router-link to="/"> home </router-link> |
        <router-link to="/food"> food </router-link> |
        <router-link to="/banner"> banner </router-link>
    </div>
    <router-view />
</template>

这里我们使用的是history，也可以用hash

//route/index.js
import { createRouter, createWebHashHistory } from "vue-router"
//注册
import home from '../pages/Home.vue'
import food from '../pages/Food.vue'
import banner from '../pages/Banner.vue'

const routes = [
  { path: "/", redirect: "/home" },
  {
    path: "/home",
    name: "home",
    component: home
  },
  {
    path: "/food",
    name: "food",
    component: food
  },
  {
    path: "/banner",
    name: "banner",
    component: banner
  }
]
//导出
const router = createRouter({
    history: createWebHashHistory(),
    routes: routes
  })

  export default router;

11.需要在main.js里面去注册

import { createApp } from 'vue'
import App from './App.vue'
import router from './route'

const app = createApp(App)
app.use(router)
app.mount('#app')

12.这个时候再去跑我们的代码就可以了

npm run serve

13.页面之间的route跳转

//Food.vue
<template>
    <p>food</p>
    <button @click="toHome">toHome</button>
     <!-- router-link组件跳转 -->
    <router-link to="/home">toHome</router-link>
  </template>
  <script>
  import { useRouter } from 'vue-router'
  export default {
    setup () {
      //编程式跳转
      const router = useRouter()
      const toHome = (() => {
        router.push({
          name: 'home'
        })
      })
      return {
        toHome
      }
    },
  }
  </script>

当我们点击toHome按钮就可以跳转到home页了,两种方式都可以跳转

14.配置ESLint和Prettier

安装ESLint

//本地安装
npm install eslint --save-dev
//全局安装
npm install -g eslint

运行eslint –init，选择工程使用了vue，自动生成.eslintrc.js文件

eslint --init

我们按照需求去选择就可以了

安装prettier

//本地
npm i -D --save-exact prettier
//全局
npm i --global prettier

安装eslint-config-prettier插件（禁用 eslint 风格校验)

npm i -D eslint-config-prettier

安装eslint-plugin-prettier插件（使eslint采用prettier的风格校验）

npm i -D eslint-plugin-prettier

配置eslintrc.js文件

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node":true,
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential"
    ],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
       //在rules中添加自定义规则
       //关闭组件命名规则
       "vue/multi-word-component-names":"off",
    }
}

在根目录下创建.prettierrc 或 prettier.config.js文件

module.exports = {
    endOfLine: 'auto', // 不检测检测文件每行结束的格式
    semi: true, // 使用分号, 默认true
    singleQuote: true // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
  }

安装vscode插件：Prettier ESLint

该插件会根据工程根目录下的eslintrc.js和prettier.config.js文件格式化代码。可以进一步设置为vscode默认formater和自动格式化。

Prettier配置常用的参数可以根据团队需求制定

链接：

[ESLint中文文档]: “https://eslint.bootcss.com “
[Prettier中文网]: “https://www.prettier.cn “

源码仓库地址：

https://github.com/mengfeng/vue-cli-start

Donate
  • Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
  • Copyrights © 2022-2023 alan_mf
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信