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

RONIN
12 阅读4分钟

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

一、构建工具

作用：

打包压缩、转换(.vue文件转换成浏览器能识别的html、css、js)

内置了web服务器可进行热更新

  • webpack构建工具
  • vite构建工具

使用：

  1. npm init -y初始化项目，生成package.json文件
  2. 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"
  },

 

  1. 执行npm run dev命令启动内置web服务器
  2. 执行npm run build打包项目，打包后会在根目录下生成一个dist文件夹，该文件夹下存放的就是打包压缩后的包

二、单文件组件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"
}

脚手架（create-vite、vue-cli、create-vue、quasar-cli）

1. create-vite

npm create vite@latest(yarn create vite)安装脚手架命令

2. vue-cli

npm i -g @vue-cli安装脚手架命令

vue create project1创建项目

3. create-vue（vue官方的项目脚手架工具，内置了vite构建工具）项目开发中使用的脚手架

npm init vue@latest安装脚手架命令,根据预设生成相应的配置文件

npm install（npm i） 安装依赖

image.png npm run dev运行

目录结构介绍

image.png

4. quasar-cli项目开发中使用的脚手架

关于quasar要求：

  • Node 12+用于Quasar CLI与Webpack，Node 14+用于Quasar CLI与Vite。
  • Yarn v1（强烈推荐），PNPM，或NPM。

npm i -g @quasar/cli 安装脚手架命令

npm init quasar 初始化quasar根据预设生成相应的配置文件 image.png 此时回车，会生成项目文件和目录 image.png 提示安装项目依赖，选择yes回车 image.png quasar dev（npm run dev）运行

avatar
文章
阅读
粉丝