vue-cli构建项目使用更少的方法 - 行业资讯 - 肥雀云

在vue-cli中构建的项目是可以使用的少,但是查看包。json可以发现,并没有更少的相关的插件,所以我们需要自行安装。
　　

<强>第一步:安装

　　　　　　npm安装less-loader——save-dev少　　之前　　　　

即通过npm安装少和less-loader,并记录到devDependencies中,因为这是我们在开发中使用的而非在生产中使用,所以就不将之记录在依赖中。
　　

<强>第二步:在配置文件中配置
　　

实际上如果我们通过vue-cli来构建项目,这一步是可以省略的。
　　

在webpack.dev.conf.js中,我们可以看到下面的代码:

　　　　　　模块:{ 　　规则:跑龙套。styleLoaders ({sourceMap: config.dev.cssSourceMap}) 　　}, 　　之前　　　　

即webpack.dev.conf.js在合并了webpack.base.conf.js的基础上又添加了dev环境下的模块只
　　

注意:在上面的代码中,我们还可以使用加载器来代替规则,他们的含义是一样的。
　　

在构建文件夹下有一个utils.js文件,这个文件提供了一些通用的方法,供webpack.dev.conf.js和webpack.prod.conf.js使用。其中styleLoaders方法如下:
　　

　　　　//生成独立的风格文件加载器(.vue以外的) 　　出口。styleLoaders=function(选项){ 　　var输出=[] 　　var装载机=exports.cssLoaders(选项) 　　在加载器(var扩展){ 　　var装载机=加载器(扩展) 　　output.push ({ 　　测试:新的正则表达式(‘\ \。”+推广+“美元”), 　　用途:加载程序　　}）　　} 　　返回输出　　} 　　之前　　　　

通过这个方法可以对大多数css预处理进行了配置,具体配置在cssLoaders方法中。
　　

<强>第三步:在单组件。vue中使用
　　

如下所示:

　　　　　　& lt; template> 　　& lt; div类=癶ello”比; 　　& lt; h3>{{味精}}& lt;/h3> 　　& lt; h3>基本Links 　　& lt; ul> 　　& lt; li>核心Docs 　　& lt;/ul> 　　& lt; h3> Ecosystem 　　& lt;/div> 　　& lt;/template> 　　　　& lt; script> 　　出口默认{ 　　名称:“你好”, 　　数据:函数(){ 　　返回{ 　　味精:“欢迎来到你的vue。js应用程序” 　　} 　　} 　　　　} 　　& lt;/script> 　　　　& lt;风格范围lang=吧佟北? 　　.hello { 　　颜色:红色; 　　字体大小:0.45快速眼动; 　　h3 { 　　颜色:蓝色; 　　} 　　} 　　& lt;/style> 　　　　之前　　　　

需要注意一下几点:
　　

1。已经在webpack中配置了,所以这里不需要引入任何少文件。
　　

2。在风格中声明lang=案佟薄Ｗ⒁?作用域的作用仅仅是限定css的作用域,防止变量污染。
　　

3。这样就可以根据少的语法使用了。
　　

补充:通过下面的代码就不难理解问什么作用域可以隔离作用域了。即给不同组件的所有html添加一个属性,然后在css中使用属性选择器来防止作用域的污染,实在聪明! ! !
　　

vue-cli构建项目使用更少的方法