维斯

维斯 查看完整档案

深圳编辑  |  填写毕业院校  |  填写所在公司/组织 vistar.top 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

维斯 赞了回答 · 1月14日

vant 引入Dialog组件报错

import { Dialog, Button, Row, Col } from 'vant'                                             JS
export default {
  components: {
    "van-dialog": Dialog,
    "van-button": Button,
    "van-row": Row,
    "van-col": Col
  },

关注 7 回答 6

维斯 赞了回答 · 1月14日

vant 引入Dialog组件报错

哈哈,和我一个问题
注册的时候要这样写

vanDialog: Dialog

关注 7 回答 6

维斯 赞了回答 · 2018-12-12

vue如何在组件内部做整个页面的遮罩层?

1.如果是用的element-ui的插件可以使用下面这种方式设置遮罩层,'#ark-per-table'指的是覆盖的盒子大小,text是遮罩层显示的文字

const loading = Loading.service({ target: '#ark-per-table', text: '加载中' })

2.如果没有用element可以使用vuex来传值,vuex的详细使用可以参照这个文章请戳这里
3.希望可以帮到你

关注 5 回答 4

维斯 赞了回答 · 2018-09-13

解决Computed property "route" was assigned to but it has no setter

我出现上面这个错误的原因是我使用了element-UI里的el-tab组件,http://element-cn.eleme.io/1....

template:
<el-tabs type="card" v-model="route">
</el-tabs>
js:
computed: {
  route () {
    return this.$store.state.curTab.route
  }
}

提问之后,很多人说是因为在代码中改了route的值,但我并没有改,后来才发现,我虽然在代码里没有改route的值,但是在页面上切换tab的时候,element-UI会去改route的值,一开始是没有问题的,直到有一次更新了vue的版本,然后就开始出现上面的错误。
总而言之:element-UI改了route + vue版本更新 导致了这个错误的产生

改正:

js:
computed: {
  route: {
    get: function () {
      return this.$store.state.curTab.route
    },
    set: function () {
    }
  }
}

关注 20 回答 22

维斯 提出了问题 · 2018-09-13

vant 引入Dialog组件报错

1、引入的dialog,注册了组件,但是会提示没有注册

clipboard.png

2、部分代码如下

                                                                                         html
      <van-dialog
            v-model="show"
            title="修改库存"
            confirm-button-text="保存">
             <van-row>商品名称:{{channel.goodsName}}</van-row>
             <van-row>库存:{{channel.stock}} / {{ channel.maxStock}}</van-row>
      </van-dialog>
import { Dialog, Button, Row, Col } from 'vant'                                             JS
export default {
  components: {
    [Dialog.name]: Dialog,
    [Button.name]: Button,
    [Row.name]: Row,
    [Col.name]: Col
  },

关注 7 回答 6

维斯 提出了问题 · 2018-09-13

vant 引入Dialog组件报错

1、引入的dialog,注册了组件,但是会提示没有注册

clipboard.png

2、部分代码如下

                                                                                         html
      <van-dialog
            v-model="show"
            title="修改库存"
            confirm-button-text="保存">
             <van-row>商品名称:{{channel.goodsName}}</van-row>
             <van-row>库存:{{channel.stock}} / {{ channel.maxStock}}</van-row>
      </van-dialog>
import { Dialog, Button, Row, Col } from 'vant'                                             JS
export default {
  components: {
    [Dialog.name]: Dialog,
    [Button.name]: Button,
    [Row.name]: Row,
    [Col.name]: Col
  },

关注 7 回答 6

维斯 赞了回答 · 2018-09-12

vant 引入组件报错

dialog模块化引用是有问题的,会提示组件未注册。

clipboard.png

关注 3 回答 2

维斯 收藏了文章 · 2018-08-17

vue2.5/vue-cli3.0版本更新引发的一些常见问题

网上很多教程文章都是基于vue2.0搭建的,vue-cli也是低版本的
在跟着教程练习时,就会产生很多疑惑:
困扰我很久,问了很多人,竟然没人说对,
虽然隐约觉得应该是版本的问题,还是不知如何下手,查阅了许多资料..

如果有人告诉我vue/cli只看这个就够了,在查资料查到吐血后,我信了!

vue-cli官方文档

安装命令调整

原:npm install -g vue-cli
vue init <template-name> <project-name>
改为:

npm install -g @vue/cli
# or
yarn global add @vue/cli

vue create my-project

vue-cli官方仓库
命名方式已经改为npm推荐的新的包名规则,使用作用域

项目初始化的不同

一般人都会告诉你选默认,然后就掉坑里了...(当然选了也掉)
发现手动初始的时候可以定义的东西挺多的..是选择manual才会有
参考上面那篇vue-cli3.0初体验..
比如less/sass都可以在这里配置...
比如我选了less在本地node_modules,就会多less的包
大概就是已经npm install less-loader style-loader less
图片描述

手动初始化加入vuex,vue-router之后,
public相当于原来的static,里面的index.html是项目的入口
src同以前
vue-cli3.0项目结构

eslint这个怎么选呢

项目结构变化

选择default初始化,可以看到项目结构为:

│  package-lock.json
│  package.json
├─public
│      favicon.ico
│      index.html
└─src
    │  App.vue
    │  main.js
    ├─assets
    │      logo.png
    └─components
            HelloWorld.vue

build哪里去了?config哪里去了?配置都消失了?

vue-cli3.0默认项目目录与2.0的相比,更精简:
1.移除的配置文件根目录下的,buildconfig等目录,
2.移除了static文件夹,新增了public文件夹,并且index.html移动到public中。
3.在src文件夹中新增了views文件夹,用于分类 试图组件 和 公共组件 。
4.大部分配置 都集成到 vue.config.js这里,在项目根目录下

在vue.config.js里大概配置
常用的路径名、根目录、预处理、devServer配置、pwa、dll、第三方插件
vue.config.js

这里不负责任的扔一篇自己写的很口水的static assets静态资源相关

Q:webpack.config.js 去哪了?

webpack相关配置
clipboard.png
那么具体在项目中如何修改呢,
这里我也还没搞的非常清楚,待研究...
不知道是不是能直接在这里设置
<projectRoot>/node_modules/@vue/cli-service/webpack.config.js
一个使用的例子
之前是分webpack.base.config.js/ dev / prod
现在去哪了呢
https://doc.webpack-china.org...

webpack-dev-server 的配置现在在 webpack.config.js/devServer 下
devserver

关于3.0更新的官方issue
尤大的解释是这样的..
图片描述

1.vue-cli@3.0修改的方向是逐步成为“config/script in a package”的模型
2.为避免使用户预先做一些不可逆的设置,
-我们将逐步一出browserify支持,webpack讲只基于一个template
-在预设时就可以配置常见的(pwa/ts/ssr)设置
3.除了封装包,提供通过vue.config.js配置的可能
-为高级功能 如 env variables, css extraction API proxying提供了一个集中的入口
-如本地预设一样,提供了底层的webpack设置支持,可能是webpackchain

可能的方向???(显然并不明确)
他这里貌似是提的设想,到底实现了多少呢?好像也没说的很明白..
去哪看他实现了多少呢???..
图片描述

Q:npm run dev改了?

在根目录的package.json里有如下命令

"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"

所以以前那些用npm run dev的,约莫是只能npm run serve/npm run build了
然后就如上图egoist设想接近了
当然本身是“打包了一个express之类的serve工具啥的.????”
具体是package.json里面“scripts”有写..键值..
我在哪看的,想不起来了...有空改吧..
我最近用的是npm run serve
不知道vue-scripts dev行不行 参考上面一段
vue-cli-service官方文档

vue-cli-service serve starts a dev server based on webpack-dev-server. It comes with hot-module-replacement (HMR) out of the box.

Q:使用vue-cli初始化后,到底还要不要装vuex,vue-router?

图片描述
当我们初始项目的时候,如果使用 默认配置 ,本地node_modules应该是这样的,所以,
没有vuex,vue-router阿! 但是估计是有vue-loader,也有webpack..
和旧版本不一样的,2.0的版本好像都会装(看教程里揣测的),反正根目录下有vuex/vue-router文件夹..

但是初始项目的时候,如果是 手动安装 的话,选了,就会有!参考问题1.
这次我们手动选择初始化...
手动选择初始化
项目结构就发生了一些变化...多了views??
多了router.js(vue-router) / store.js(vuex)
图片描述

Q:原来写在src/router/index.js 现在放哪呢

教程里一般都是index.js

那现在我们放哪呢?
ok,经过自定义带router的初始化,我们可以放在router.js里~

全部的组件都是注册到app.vue么? 还是都引入在main.js
这里是真的不太懂,主要是不懂vue开发者项目结构的思路..其实只要引入import export了能用就行..
但是为了追求完美..待研究...
(对了这里的@components是webpack alias??配置,忘了在哪看的了webpack alias
脑壳痛,关于webpack4.0大约也要写一篇文章..

Q:render/mount/app的一些问题

new Vue({
  render: h => h(App)
}).$mount('#app')

这一段我一开始没看懂,现在略略有点懂了..
详细参见render h=>h(app)都是些啥
基本上就是..

new Vue({
  el: '#app',
  render: function(h) {
    return h(app)
  }
})

css相关

https://github.com/vuejs/vue-...

Q: webpack4.0的一些问题..

待更新..
我搜到的参考文章:
https://www.imooc.com/article...
https://juejin.im/post/5ac9dc...

有空再更新了

扔一点学习资料:
Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案
话说我觉得这个真的可以写成官方q&a特别3.0一出
如果有的话麻烦甩下连接谢谢..
不过现在很多都写在报错提示上了,还是很赞的..

本文参考:
vue-cli3.0初体验..
vue-cli3.0特性
vue3.0入门
Vue CLI 3.x 简单体验

其他可供参考
常用配置修改

查看原文

维斯 赞了回答 · 2018-08-10

解决怎么在vue-cli的组件模板里使用font-awesome

方法一:

npm install font-awesome
main.js里添加
import 'font-awesome/css/font-awesome.css'

方法二:

官网下载代码到本地,现在应该是font-awesome-4.7,把整个文件夹放到static文件夹中,然后在index.html中加上<link rel="stylesheet" href="/static/font-awesome-4.7/css/font-awesome.min.css">,应该就可以了。

关注 3 回答 1

维斯 赞了回答 · 2018-08-02

解决vue用element表格怎么去掉表头

再仔细看看文档。

有一个属性,叫:show-header

关注 3 回答 3

认证与成就

  • 获得 0 次点赞
  • 获得 3 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-07-28
个人主页被 273 人浏览