安装
项目根目录下打开终端或命令行工具,运行以下命令来安装相关依赖包:
npm install less-loader less --save-dev
这会将 Less 和 Less loader 作为开发依赖项安装到你的项目中。
如果没有其他需求,安装好就已经可以在项目中直接使用了。
在项目中使用
1. Vue文件中使用
找到 src/App.vue
文件中 <style>
代码块,添加 lang="less"
和 scoped
:
<style lang="less" scoped>
</style>
lang="less"
表示该<style>标签中的代码将使用 Less 语法编写。
scoped
是一个特殊的属性,它告诉Vue要对该组件的样式进行作用域限制。当你使用scoped属性时,组件中的样式只会应用到该组件内部,不会影响其他组件。
2. 引入独立less样式文件
在 src/assets/styles
文件夹下新建一个,名为index.less
的通用样式文件,并添加自己习惯的通用样式,可参考以下内容:
body, html {
min-height: 100%;
font-size: 16px;
color: #333;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, ul, div, img, h5, h4, h3, h2, h1, p, span, table, figure, i, em, tt, li {
list-style: none;
margin: 0;
padding: 0;
}
body > * {
margin: auto;
}
a {
cursor: pointer;
text-decoration: none;
}
i {
font-style: normal;
}
textarea {
font-family: inherit;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.none {
position: absolute;
height: 0;
width: 0;
padding: 0;
margin: 0;
border: none;
}
.cursor-p {
cursor: pointer;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
然后在src/main.js
中引入:
import '@css/index.less'
修改后的代码如下:
import Vue from 'vue'
import App from './App.vue'
import '@css/index.less'
// 禁用生产环境提示
Vue.config.productionTip = false
new Vue({
render: (h) => h(App)
}).$mount('#app')
@css
是上一章配置的路径别名
Less具体语法可参考 Less官方文档
配置 sourceMap
在你的项目根目录下,找到 vue.config.js
文件,根据以下内容进行修改:
module.exports = {
// 配置css相关选项
css: {
// 开启 source map
sourceMap: true
},
}
Source Map 开启后启动开发环境和生产环境都启用了 Source Map,显然不符合我们的预期。
正常情况下,我们需要在开发环境下启用Source Map,在生产环境下禁用Source Map。
可以通过环境来设置是否开启此功能,代码如下:
css: {
sourceMap: process.env.NODE_ENV == 'development'
}
一般来说,process.env.NODE_ENV
会在开发环境中被设置为 'development'
,在生产环境中被设置为'production'
。我们通过三目运算判断是否是开发环境,如果是开启反之则关闭即可。
vue.config.js
修改后的完整内容:
const path = require('path')
module.exports = {
// 静态资源访问路径
publicPath: './',
// 指定构建后的输出目录,默认是 'dist'
outputDir: 'dist',
// 配置开发服务器选项
devServer: {
// 开发服务器启动时是否自动打开浏览器
open: true,
// 端口号
port: 3000
},
// 配置css相关选项
css: {
// 开启 source map
sourceMap: process.env.NODE_ENV == 'development'
},
// webpack 的配置对象
configureWebpack: {
// 配置Webpack模块解析的方式,使得你可以通过模块名字而不是相对路径来引入模块
resolve: {
// 设置路径别名
alias: {
'@': path.resolve('src'),
'@public': path.resolve('public'),
'@img': path.resolve('src/assets/images'),
'@js': path.resolve('src/assets/scripts'),
'@css': path.resolve('src/assets/styles')
}
}
}
}
配置完成后,重新启动开发服务器就能看到效果了。
配置 Less 全局变量
在你的项目根目录下,找到 vue.config.js
文件,根据以下内容进行修改:
module.exports = {
css: {
loaderOptions: {
less: {
lessOptions: {
// 配置全局变量
globalVars: {
'logoName': 'logo'
}
}
}
}
}
}
在less中使用配置的变量
.classname {
background: url('@img/@{logoName}.png');
}
框架搭建整体流程
-
第一步 Vue2 使用 Vue 脚手架 Vue CLI 搭建一个 Vue.js 前端项目框架
-
第二步 Vue2 vue.config.js 基础配置,路径别名alias
-
第三步 Vue2 vue.config.js 集成 Less 配置 sourceMap+全局变量
-
第四步 Vue2 配置ESLint
-
第五步 Vue2 vue.config.js 使用image-minimizer-webpack-plugin配置图片压缩
-
第六步 Vue2 集成全家桶 vue-router vuex axios 和 element-ui
-
第七步 Webpack 配置多环境和全局变量 cross-env 和 webpack.DefinePlugin
网友评论