Vue第二周踩坑笔记
Powered by ThinkBig
第二周踩坑笔记
项目目录结构：
--save-dev
自动把模块和版本号添加到模块配置文件package.json中的依赖里devdependencies部分
--save-dev与 --save 的区别
--save安装包信息将加入到dependencies（生产阶段的依赖）
--save-dev安装包信息将加入到devDependencies（开发阶段的依赖），所以开发阶段一般使用它
踩坑点一：运行localhost:8080 cannot GET，也没有显示路由的#号，而在控制台终端并没有报任何错误
原因一：
使用了mode: history模式
History模式要跑在服务端里面
原因二：
改过了config/index.js的部分配置
因为我之前把assetsPublicPath:“/”改成”./”
还原成”/”然后在本机运行cnpm run dev就成功了
需要注意的是：
打包文件时使用./
assetsPublicPath: "./"
本地运行时去掉.
assetsPublicPath: "/"
踩坑点二：
自定义指令v-focua获取焦点失败
失败描述：定义了私有属性directives，在里面设置了
directives: {
focus: {
inserted: function(el) {
el.focus();
Console.log(‘ok’);
}
}
},
然后在里面使用自定义的属性v-focus
<el-input
type="text"
v-model="form.verifyCode"
auto-complete="off"
placeholder="验证码"
class="w-150"
v-focus
></el-input>
这样写的结果是在控制台可以输出ok，但是我们实际想得到的获取焦点的效果并没有实现
然后，我用原生的元素里面使用v-focus属性，可以获取焦点，所以问题就出在我们使用了element-ui的关系
解决方法：
把directives改成以下
directives: {
focus: {
inserted: function(el) {
el.querySelector("input").focus();
}
}
}
踩坑点三：@究竟代表的是什么？
在build目录下的webpack.base.conf.js文件下，有关于@的设置
resolve方法的作用是返回src目录的绝对路径
所以说，@代表的是该项目下‘src’目录的绝对路径
踩坑点四：iView is not defined
第一次使用ivew框架时就踩了一个大坑，在按照官方文档的方式在项目中引用了iview，其中核心代码为：
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
然而当我用了其他一些操作时，导致了发生了一个错误：经排除，造成这个错误的原因大部分是因为：使用了按需导入iview的方式。
什么意思呢？我们来看一下官方为我们埋下的坑：这一步是没有问题的，按照这种方法可以实现iview的导入，然后：
估计很多人像我一样，引入所有Vue.use(iView)之后就可以按需引入了，但是全局引用和局部引入是不能同时使用的可能这是一个常识，但是对于像我这样的新手来说，真是一个大大大的坑，第一次使用还真的很难意识到这点
现在知道了原因就好办了，
解决方法一：全局引用
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
//删除".babelrc"配置文件中的[
// "import",
// {
// "libraryName": "iview",
// "libraryDirectory": "src/components"
// }
// ]
解决方法二：局部引入
//删除Vue.use(iView); 和 import iView from 'iview';
import { Button, Table } from 'iview';
Vue.component('Button', Button);
Vue.component('Table', Table);
//安装babel-plugin-import插件，并在".babelrc"配置文件添加配置
"plugins": [
//......
[
"import",
{
"libraryName": "iview",
"libraryDirectory": "src/components"
}
]
] //babel插件
踩坑点五：Module not found: Error: Can't resolve 'style-loader!css-loader!less-loader'
在使用iview自定义主题的时候，导入.less包报错，module not found 看着一脸懵逼，毫无头绪，明明路径没错
之前已经安装过了less和 less-loader
如果你还没有配的话你可以使用一下两条语句来安装less和 less-loader
npm i less --save
npm i less-loader --save
网上找了很多资料，就找到一篇是有用的
其实都不用在webpack.base.conf.js里面配less-loader，
但是需要在webpack.base.conf.js里面的extensions 数组添加一项 .less
你在网上可能找到的是这样配的
如：
// {
// test: /\.less$/,
// // loader: "style-loader!css-loader!less-loader",
// options: {
// javascriptEnabled: true
// }
// }
但是其实这样写只会更多错
因为，你在安装vue-cli的时候，vue-vli脚手架已经帮你配置好less-loader了
在bulid/utils.js你看到的是这样的
less: generateLoaders("less"),
说了这么多，要怎么改才能正确运行呢？
很简单，改成这样就完事了
less: generateLoaders("less", { javascriptEnabled: true }),
保存一下，重新运行npm run dev就能运行了
