如何在vue中使用less
转自：http://blog.csdn.net/lyt_angularjs/article/details/76241626仅用于学习，不可商用！初始环境：npm+nodeCNPM:如果安装速度过慢，请安装cnpm，然后将下列所有npm换成cnpm。命令行中输入：npm i -g cnpm --registry=https://registry.npm.taobao.orgVue新建项目：npm
·
转自：http://blog.csdn.net/lyt_angularjs/article/details/76241626
仅用于学习，不可商用！
初始环境：npm+node
CNPM:
如果安装速度过慢，请安装cnpm，然后将下列所有npm换成cnpm。命令行中输入：npm i -g cnpm --registry=https://registry.npm.taobao.org
Vue新建项目：
npm i -g vue vue-cli webpack -g
解释：
此命令用于安装vue的基础环境
i 表示install
-g表示全局安装
webpack是官方推荐的打包工具
i 表示install
-g表示全局安装
webpack是官方推荐的打包工具
vue init webpack youProjectName
解释：
此命令用于创建项目
youProjectName处输入你项目的名字
project name 请输入项目的名字，直接回车就行
project description 请描述你的项目，默认使用vue的描述，直接回车就行
author 请输入作者，一般写你名字的缩写就行
vue build 请选择使用风格，回车选择默认的runtime+compiler就行
install vue-router 是否安装路由，回车安装
use eslint to lint your code ,是否安装eslint代码风格检查器，新手建议不安装输入n回车
后面几个测试的全部n回车
cd youProjectName
解释：
进入项目
npm i
解释：
根据package.json里面的设置安装默认的依赖
npm i iview axios qs babel-polyfill --save
解释：
安装ui插件iview
安装promise风格的ajax插件 axios
安装qs用于解析json
安装babel-polyfill用于支持esmascript6.0的promise
--save表示运行时依赖这些环境
npm i stylus stylus-loader css-loader style-loader less-loader --save-dev
修改webpack.base.config中的配置
{
test:
/\.less
$
/,
loader:
"style-loader!css-loader!less-loader",
},
解释：
安装css预处理语音stylus和less用于编写css
--save-dev表示编写时依赖这些环境但编译后运行时不再依赖
npm run dev
解释：
运行此项目
npm run build
解释：
使用webpack打包
打包结果在youProjectName下面的dist中
只需将dist目录放到tomcat中并设置主页为dist/index.html即可在线上环境运行
2。。。。或者下面的方法
npm install less less-loader --save-dev
安装成功后，打开 build/webpack.base.conf.js ，在 module.exports = 的对象的 module.rules 后面添加一段：
-
module. exports = {
-
-
module: {
-
rules: [
-
-
{
-
test: /\.less$/,
-
loader: "style-loader!css-loader!less-loader",
-
}
-
]
-
}
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献19条内容
所有评论(0)