登录
VUE开发环境配置基础（构建工具→单文件组件SFC→css预处理器sass→eslint）及安装脚手架
2026年4月20日 17:44
VUE开发环境配置基础（构建工具→单文件组件SFC→css预处理器sass→eslint）
一、构建工具
作用：
打包压缩、转换(.vue文件转换成浏览器能识别的html、css、js)
内置了web服务器可进行热更新
- webpack构建工具
- 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文件夹，该文件夹下存放的就是打包压缩后的包
二、单文件组件SFC（.vue结尾的文件）包括<template><script><style>
- 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一个语法规则和代码风格的检查工具，保证写出语法正确、风格统一的代码
手动集成：
- npm i eslint -D(yarn add eslint -D) 安装eslint
- 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插件，自动检测，不符合规则会报错
- npm i pretter eslint-config-prettier -D(yarn add pretter eslint-config-prettier -D)安装eslint格式化插件，格式化时自动改正
- 根目录下创建配置.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） 安装依赖
npm run dev运行
目录结构介绍
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根据预设生成相应的配置文件
此时回车，会生成项目文件和目录
提示安装项目依赖，选择yes回车
quasar dev（npm run dev）运行
