vue-cli安装及初始化项目链接 及报错

https://blog.csdn.net/zz_ch/article/details/84871306

 

 

 

报错：* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/

解决：

vue：style标签中的scoped属性（作用域）和lang属性的介绍

时间:2020-07-24

本文章向大家介绍vue：style标签中的scoped属性（作用域）和lang属性的介绍，主要包括vue：style标签中的scoped属性（作用域）和lang属性的介绍使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

1、 什么是CSS预处理器
CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。CSS预处理语言有SCSS (SASS) 和LESS等等，总之都是用来实现样式的。
2、lang
因此lang的属性可选：scss（sass）、less等等
即：<style lang="scss">
3、scss和sass的区别
scss是sass的一个升级版本，两者都是用来实现样式的，只是语法有各自的不同点。
注明：使用这个lang的属性需要安装scss（sass）
4、scoped属性
scoped是指定样式的局部作用域。
在vue中：App.vue相当于根容器，不设置scoped。所以一般在App.vue中引用公共样式。而在其它.vue页面中用scoped，代表当前样式只作用于当前.vue页面。不作用于其它.vue页面。

 

 

 

 

报错i：

error in (webpack)-dev-server/client?http://localhost:8081

Module build failed: ReferenceError: Unknown plugin "import" specified in "F:\\gs\\xm\\my-demo\\.babelrc" at 2, attempted to resolve relative to "F:\\gs\\xm\\my-demo"
at F:\gs\xm\my-demo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:17
at Array.map (<anonymous>)
at Function.normalisePlugins (F:\gs\xm\my-demo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20)
at OptionManager.mergeOptions (F:\gs\xm\my-demo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36)
at OptionManager.init (F:\gs\xm\my-demo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (F:\gs\xm\my-demo\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (F:\gs\xm\my-demo\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (F:\gs\xm\my-demo\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transpile (F:\gs\xm\my-demo\node_modules\babel-loader\lib\index.js:50:20)
at Object.module.exports (F:\gs\xm\my-demo\node_modules\babel-loader\lib\index.js:173:20)

@ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

 

解决：

方式一. 自动按需引入组件 (推荐)

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

 

有很大可能性没有安装

# 安装插件 npm i babel-plugin-import -D