VUE开发环境配置基础（构建工具→单文件组件SFC→css预处理器sass→eslint）

RONIN
109 阅读6分钟

VUE开发环境配置基础（构建工具→单文件组件SFC→css预处理器sass→eslint）

一、构建工具

1. 作用：

将浏览器不能识别的文件进行统一处理。

vue文件编译成浏览器能识别的js/html/css文件、ts编译成js文件、scss编译成css文件，打包压缩处理。

2.常用构建工具：
  • webpack构建工具
  • vite构建工具
  • gulp构建工具
3. webpack构建工具：

根据入口文件找到所有依赖包，加载到内存进行统一打包处理，编译成浏览器能识别的代码

官网：www.webpackjs.com/concepts/

特点：
  • 如果项目比较大，打包需要的时间很长， 这也是大的项目，使用webpack构建比较慢的原因
  • 兼容性好，支持es6模块化 、commonjs模块化
核心技术点：

webpack 能处理各种不同类型文件，做各打包构建操作，主要来自loader和plugin插件功能

  • entry:入口
  • outer:出口
  • loader:不同类型文件进行转换
  • plugin插件:扩展功能
手动构建打包示例：用webpack构建工具编译代码，编译成低版本浏览器能识别的代码。
  • npm init -y初始化项目
  • npm install webpack@5.73.0 webpack-cli@4.9.2 --save-dev安装webpack构建工具/webpack客户端工具

src文件夹→main.js入口文件

import model from './app'

// 使用webpack编译代码成低版本浏览器能识别的代码
const sum = (a, b) => a + b;
const s = sum(10, 20);
console.log("s ", s);

src文件夹→app.js

import './style.css'
const root = document.getElementById('app')
const h2Ele = document.createElement('h2')

h2Ele.innerHTML = 'webpack手动构建打包'
root.appendChild(h2Ele)

src文件夹→style.css

h2{
    color:red;
}

public文件夹→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>手动使用webpack构建工具</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

webpack.config.js文件中配置entry入口\outer出口\loader\plugin插件，代理服务器等

  • npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env 安装处理js的loader（编译成低版本浏览器能识别的代码）
  • npm install --save-dev style-loader css-loader安装处理css的loader（编译成低版本浏览器能识别的代码）
  •  npm i html-webpack-plugin安装HtmlWebpackPlugin插件（默认生成index.html,新文件替换原文件，所有的bundle自动添加到其中）
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 入口
  entry: "./src/main.js",
  // 出口
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  // loader
  module: {
    rules: [
      {
        test: /**\.** js$/,
        exclude: path.resolve(__dirname, "node_modules"),
        include: path.resolve(__dirname, "src"),
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },//处理js的loader
      {
        test: /**\.** css$/,
        use: ["style-loader", "css-loader"],
      },//处理css的loader
    ],
  },
  //插件
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: __dirname + "/public/index.html",
    }),
  ],
};

执行webpack打包项目，webpack - -mode production/development指定生产环境/开发环境。

根据loader配置、插件配置，对src下面的源码进行打包，打包后会在根目录下生成一个dist文件夹，该文件夹下存放的就是打包压缩后的包

package.json文件中配置serve、build

"scripts": {
    "serve": "webpack --mode development",
    "build": "webpack --mode product",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

执行npm run serve命令启动内置web服务器

执行npm run build打包项目，打包后会在根目录下生成一个dist文件夹，该文件夹下存放的就是打包压缩后的包

vue2：vue-cli脚手架（webpack构建工具）

  • npm i -g @vue-cli/yarn global add @vue-cli安装脚手架命令
  • vue create project1创建项目，启动预设
4. vite构建工具：
  • npm init -y初始化项目，生成package.json文件
  • npm i vite -D（npm install vite -D）安装vite构建工具（-S生产环境，-D局部安装/开发环境，-G全局安装）

安装之后可以使用vite命令启动内置web服务器

但开发中一般会在package.json文件中配置dev、build

"scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
  },

执行npm run dev命令启动内置web服务器

执行npm run build打包项目，打包后会在根目录下生成一个dist文件夹，该文件夹下存放的就是打包压缩后的包

5.区别：
1. 构建原理方式不同：
  • webpack根据入口文件找到所有依赖包，加载到内存进行统一打包处理，编译成浏览器能识别的代码，然后启动服务器运行。
  • 当更改一个文件时，重新加载编译，如果项目比较大，编译加载速度慢。

image.png

  • vite先启动服务器运行，然后去找运行需要的依赖包加载。
  • vite构建比webpack快。

image.png

2.模块化
  • webpack兼容性好，支持es6模块化 、支持commonjs模块化
  • vite支持es6模块化 、不支持commonjs模块化

二、单文件组件SFC（.vue结尾的文件）包括<template><script><style>

  1. npm i @vitejs/plugin-vue -S 安装vite构建工具解析.vue文件的插件

根目录下创建vite.config.js文件，配置集成该插件

import vue from '@vitejs/plugin-vue' // vite构建工具解析 .vue文件的插件
import {defineConfig} from 'vite'//defineConfig方法，编写代码会有提示
export default defineConfig({
    plugins:[vue()] // 集成插件
})

2. npm i vue -S 安装vue框架

main.js

// import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
import { createApp } from 'vue'

// import App from './App.js'
import App from './App.vue'

createApp(App).mount('#app')

App.vue

<!-- 模板 -->
<template>
    <div class="g-wrapper">
        <h2>单文件组件 SFC</h2>
        <p>{{message}}</p>
        <table>
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>价格</th>
            </tr>

            <!--  绑定key目的: 虚拟dom diff算法能够快速找到列表项，对列表项进行高效操作 -->
            <tr v-for="item,index in list" :key="item.id">
                 <td>{{item.id}}</td>
                 <td>{{item.name}}</td>
                 <td>{{item.price}}</td>
            </tr>
        </table>
        <ComA></ComA>
    </div>
</template>

<!-- js代码 -->
<script>
import ComA from './components/ComA.vue'
export default {
    components:{
        ComA
    },
    data() {
        return {
            message:'根组件App.vue',
            list:[
                {id:1001,name:'javascript编程',price:99.89},
                {id:1002,name:'css编程',price:89.89},
                {id:1003,name:'vue编程',price:178.88},
            ]
        }
    }
}
</script>

<!-- css样式 -->
<style scoped>
.g-wrapper{
    width: 1200px;
    margin: 100px auto;
}

.g-wrapper table{
    width: 100%;
    text-align: center;
}

.g-wrapper table tr td,th{
    border-bottom: 1px dotted gray;
    line-height: 40px;
}
</style>

ComA.vue

<template>
  <div class="g-wrapper">
    <h2>组件ComA</h2>
  </div>
</template>

<script>
export default {};
</script>

<!-- scoped :样式作用域只在当前组件生效 -->
<style scoped>
h2 {
  color: red;
}
</style>

三、css预处理器less，sass，stylus

sass（两个版本：sass、scss。scss是sass的升级版，完全兼容css）

官网：www.sass.hk/

npm i sass -D 安装sass（vite构建工具内置了sass库，安装后不需要配置）

1. 导入样式可以在main.js入口文件中导入，也可以在某个模块中导入

scss文件导入总结：

  • main.js入口文件：import  ‘./text.scss’
  • .vue文件:@import  url(./text.scss)
  • .scss同级文件：@import  ‘./text.scss’

main.js

import { createApp } from 'vue'
// 模块化导入样式
import "./assets/scss/text.scss";

import App from './App.vue'
createApp(App).mount('#app')

.vue文件

<style scoped>
// 导入样式
@import url(../assets/sass/test.scss);
</style>

2. scss语法

变量$btn、混合器@mixin可单独封装一个文件，便于维护

1>.定义变量:

$变量名:值

$c: blue; // scss定义变量
$h: 200px;
$btnH: 40px;
2>.嵌套语法:
//css写法
// .g-container {
//   background-color: pink;
//   height: $h;
// }

// .g-container h2 {
//     font-size: 18px;
//     color: $c;
// }

// 嵌套语法
.g-container {
  background-color: pink;
  height: $h;
  h2 {
    font-size: 18px;
    color: $c;
  }
}
3>.混合器：样式封装

定义混合器@mixin 混合器名{}（相当于函数function 函数名）

@mixin btn1{
    display: inline-block;
    //封装样式
    width: 100px;
    height: $btnH;
    text-align: center;
    line-height: $btnH;
    border: none;
    outline: none;
    background-color: skyblue;
    border-radius: 5px;
}

使用封装的混合器（@include 混合器名）

.m-a1 {
    color: blue;
    margin: 10px;
    @include btn1;
  }
4>.鼠标悬停（伪类&）
//css写法
// .m-a1:hover{
//   background-color: #3eb8e9;
// }

.m-a1 {
  color: blue;
  margin: 10px;
  @include btn1;
  &:hover {
    background-color: #3eb8e9;
  }
}
5>.控制指令@if

@if 表达式返回值不是false或者null时，条件成立，输出(}内的代码。

@if 声明后面可以跟多个@else if 声明，或者一个@else 声明。

$type: monster;

P{
@if $type == ocean {color: blue;}
@else if $type == matador {color: red;}
@else if $type == monster {color: green;}
@else {color: black;}
}

更多语法参官网

3.单文件组件中使用scss（lang=”scss”）

<style lang="scss" scoped>
// 模块化导入样式
/*@import url(../assets/sass/test.scss); */

.g-container{
  background-color: pink;
  h2{
    color:red;
  }
  div{
    width: 100px;
    height: 40px;
    background-color: skyblue;
  }
}
</style>

四、eslint一个语法规则和代码风格的检查工具，保证写出语法正确、风格统一的代码

官网：eslint.nodejs.cn/

手动集成：

  1. npm i eslint -D(yarn add eslint -D) 安装eslint
  2. npx eslint --init 初始化项目eslint，生成.eslintrc.js配置文件
/* eslint-disable no-undef */

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },

    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential"
    ],

    "overrides": [
    ],

    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },

    "plugins": [
        "vue"
    ],

    "rules": {//自定义规则
        // semi: ['error', 'never'],  // 使用分号结束报错
        // quotes: ['error', 'single'],  // 使用单引号报错
        // eqeqeq: ['error', 'always'],// 使用===，不能使用==
        // 'vue/no-unused-vars': 'error',
    }
}

3. npm i eslint-plugin-vue 安装检查单文件组件的插件 4. vscode搜索安装ESLint插件，自动检测，不符合规则会报错

  1. npm i pretter eslint-config-prettier -D(yarn add pretter eslint-config-prettier -D)安装eslint格式化插件，格式化时自动改正
  2. 根目录下创建配置.prettierrc.json格式化规则文件
{
    "tabWidth": 4,
    "useTabs": false,
    "semi": false,
    "singleQuote": true,
    "TrailingComma": "all",
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "arrowParens": "avoid"
}
avatar
文章
阅读
粉丝