发现群里有些问题的提问重复率太高了,每次都去回答,回答的贼烦.
这里做一个大体的汇总,废话不多说,直接开始
给出方案,不是手把手..若是连问题和解决都看不懂的..应该去补充下基础知识
)
- install timeout
方案有这么些:
: 国内对npm的镜像版本
- cnpm
- /*
- cnpm website: https://npm.taobao.org/
- */
- npm install - g cnpm--registry = https: //registry.npm.taobao.org
- // cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些
和
- yarn
改源大法
- npm
- npm config set registry https://registry.npm.taobao.org
- yarn config set registry https://registry.npm.taobao.org
、build失败等
- python
因为一些
的包安装需要编译的环境,
- npm
和
- mac
都还好,大多都齐全window 用户依赖
- linux
和
- visual studio 的一些库
,
- python 2+
windows的小伙伴都装上:
- 找不到某些依赖或者模块
- can't not find 'xxModule'
这种情况一般报错信息可以看到是哪个包抛出的信息.
一般卸载这个模块,安装重新安装下即可.
- <!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件-->
- <!--// 错误例子1-->
- <
- el-input
- placeholder
- =
- "请输入特定消费金额 "
- @
- mouseover
- =
- "test()"
- >
- </el-input>
- <!--// 错误例子2-->
- <
- router-link
- :to
- =
- "item.menuUrl"
- @
- click
- =
- "toggleName=''"
- >
- <i :class="['fzicon',item.menuIcon]"></i>
- <span>{{item.menuName}}</span>
- </router-link>
- <!--上面的两个例子都没法触发事件!!!-->
- <!--究其原因,少了一个修饰符 .native-->
- <
- router-link
- :to
- =
- "item.menuUrl"
- @
- click.native
- =
- "toggleName=''"
- >
- <i :class="['fzicon',item.menuIcon]"></i>
- <span>{{item.menuName}}</span>
- </router-link>
- <!--明明官方文档有的,一堆人不愿意去看,,Fuck-->
- <!--https://cn.vuejs.org/v2/guide/components.html#给组件绑定原生事件-->
, 为什么 IE 浏览器不识别(IE9+)
- axios
那是因为 IE 整个家族都不支持 promise, 解决方案:
- npm install es6 - promise
- // 在 main.js 引入即可
- // ES6的polyfill
- require("es6-promise").polyfill();
这种问题老生常谈了,我就不细说了..大体说一下;
1:
, 前后端都要对应去配置,IE10+2:
- CORS
反向代理,一劳永逸 <-- 线上环境可以用这个
- nginx
线下开发模式,比如你用了
, 里面的 webpack 有引入了
- vue-cli
这么个玩意,也可以做接口反向代理
- proxyTable
- // 在 config 目录下的index.js
- proxyTable: {
- "/bp-api": {
- target: "http://new.d.st.cn",
- changeOrigin: true,
- // pathRewrite: {
- // "^/bp-api": "/"
- // }
- }
- }
- // target : 就是 api 的代理的实际路径
- // changeOrigin: 就是是变源,必须是...
- // pathRewrite : 就是路径重定向,一看就知道
后,除了首次启动首页没报错,刷新访问路由都报错!
- history
必须给对应的服务端配置查询的主页面..也可以认为是主路由入口的引导
官方文档也有,为毛总有人不喜欢去看文档,总喜欢做伸手党....FUCK
传送门 : Vue-Router history Mode
Of course !!
各种路由器的钩子!! 传送门: 导航守卫;
当然,记忆滚动的位置也可以做到,详情翻翻里面的文档
- TypeError: xxx is not a function
这种问题明显就是写法有问题...能不能动点脑子!!
- Uncaught ReferenceError: xxx is not define
对应的变量没有声明
- data
- Error in render function:"Type Error: Cannot read property 'xxx' of undefined"
这种问题大多都是初始化的姿势不对;
比如引入
这些...仔细去了解下生命周期,再来具体初始化;
- echart
vue 组件有时候也会(嵌套组件或者
传递初始化)..也是基本这个问题
- props
- Unexpected token: operator xxxxx
大佬,这个一看就是语法错误啊.
基本都是符号问题.
一般报错会给出哪一行或者哪个组件
之后不能直接访问
- npm run build
大佬!你最起码得在本地搭个服务器才能访问好么!!
引入图片打包后,访问路径错误
- background
因为打包后图片是在根目录下,你用相对路径肯定报错啊....
你可以魔改 webpack 的配置文件里面的
为
- static
...但是不建议
- ./static
你若是把图片什么丢到
目录下,然后相对路径,打包后是正常的
- assets
- unsupported platform xxx
一般两种情况,
版本不兼容,系统不兼容;
- node
解决方案: 要么不装,要么满足安装要求;
这些
- Unexpected tab charater
一般是你用脚手架初始化的时候开了 eslint ;
要么遵循规则,要么改变规则;
要么直接把 webpack 里面的 eslint 检测给关闭了
- Failed to mount component: template or render function not defined
组件挂载失败,问题只有这么几个
组件没有正确引入; 挂载点顺序错了了;
自行动手排查
- Unknown custom element: <xxx> - did you register the component correctly?
组件没有正确引入或者正确使用,依次确认
的
- axios
请求后台接受不到!
- post
默认是 json 格式提交,确认后台是否做了对应的支持;
- axios
若是只能接受传统的表单序列化,就需要自己写一个转义的方法...
当然还有一个更加省事的方案,装一个小模块
- qs
- npm install qs -S
- // 然后在对应的地方转就行了..单一请求也行,拦截器也行...我是写在拦截器的.
- // 具体可以看看我 axios 封装那篇文章
- //POST传参序列化(添加请求拦截器)
- Axios.interceptors.request.use(
- config => {
- // 在发送请求之前做某件事
- if (
- config.method === "post"
- ) {
- // 序列化
- config.data = qs.stringify(config.data); // ***** 这里转义
- }
- // 若是有做鉴权token , 就给头部带上token
- if (localStorage.token) {
- config.headers.Authorization = localStorage.token;
- }
- return config;
- },
- error => {
- Message({
- // 饿了么的消息弹窗组件,类似toast
- showClose: true,
- message: error,
- type: "error.data.error.message"
- });
- return Promise.reject(error.data.error.message);
- }
- );
- Invalid prop: type check failed for prop "xxx". Expected Boolean, got String.
这种问题一般就是组件内的
类型已经设置了接受的范围类型,而你传递的值却又不是它需要的类型,写代码严谨些 OK
- props
- // 不行,看下面的错误例子
- <li v-for="(item,index) in range | sortByDesc | spliceText">{{item}}</li>
- // `vue2+`的指令只能用语 mustache`{{}}` , 正确姿势如下:
- <span>{{ message | capitalize }}</span>
,
- [...Array]
,
- ...mapState
,
- [SOME_MUTATION] (state) {}
这种写法是什么鬼!
- increment ({ commit }) {}
出门左拐,ES6+(ES2015)的基础去过一遍..
上面依次:数组解耦,对象解耦,对象风格函数,对象解耦赋值传递
- Error in event handler for "click":"xxx"
这个问题大多都是你写的代码有问题.你的事件触发了.
但是组件内部缺少对应的实现或者变量,所以抛出事件错误.
解决方案:看着报错慢慢排查
基本最常用的是这三种;
- props
- emit
: 就是找一个中间组件来作为信息传递中介
- event bus
: 信息树
- vuex
传送门:
因为
的 store 干不过刷新啊.
- vuex
Github 一搜一大堆,提这些问题的人,不是培训机构的就是瞎进这行的人或者学生党;
传送门:一篇不大靠谱的nginx 1.11.10配置文件
还有很多公司在用,源码可以学习的地方很多;
- jQuery
原生 js 是根本,不管是哪个前端框架,最终都是 js 实现的;
只有基础扎实,才能学的比较深...
框架只是加快开发,提交效率,但不是你在这一行长期立足的根本;
前端的人不仅需要宽度,也要深度...这样才能走的更远....
基础薄弱的,
比较好上手基础较好的,可以选择
- Vue
或者
- NG5
;
- React 16
NG5需要学习
和
- typescript
,还用到比较多的新东西,比如装饰器,后端的注入概念.ng有自己的一整套 MVVM 流程;
- rxjs
而
和
- Vue
核心只是
- React
,可以搭配自己喜欢的
- view
的写法偏向函数式写法,还有 jsx,官方自己有
- React
,当然也能搭配
- flow
,我也没怎么接触..所以也有一定的学习成本;
- ts
至于哪个比较好找工作!!!告诉你..若是只会一个框架,那不是一个合格的前端;
人家要的是动手能力,解决能力!!!!技术和待遇是成正比的!!
颜值和背景,学历,口才可以加分..但是这些条件你必须要有的基础下才能考虑这些,不然就慢慢学;
依次排除和确认:
这些都可以不要了,很少操作 dom,而且原生基本满足开发
- jquey
这些,webpack 排除国际化语言包
- moment
整体下来,打包之后一般不会太大;
但是倘若想要更快?那就只能采用服务端渲染(SSR)了,可以避免浏览器去解析模板和指令这些;
直接返回一个 html ....还能 SEO...
当然不行,浏览器安全机制不允许,JS天生不能越权(NodeJS不能单纯说是JS)
你要 mock 数据,一般都有比较成熟的方案...传送门:
拦截器来做数据拦截及响应..这样可以检测到更多数据类型的响应;不过 IE系列全军覆没,
- Proxy
都不行
- polyfill
; 但是周边库没跟上..你想要用
- typescript 2.6
开发已经没什么特别的坑了...但是组件基本都是要自己去写..第三方没有加上对应的声明一堆问题
- ts+vue
问题就汇总了这么多...还有一些以前看到了.但是忘记了..想不起来了...后续有看到再补上.
小伙伴们也可以留言补充,我会及时跟进....
不过现在的新人好浮躁,一言不合就做伸手党...不愿花时间去折腾.无解.....
希望该篇文章可以帮到一些小伙伴节省时间,加快开发。
最后送上一张我群里的提问图....我们都是人,都有脾气...
来源: https://juejin.im/post/59fa9257f265da43062a1b0e