美文网首页
建立编辑器-vue项目

建立编辑器-vue项目

作者: 放风筝的小小马 | 来源:发表于2017-08-16 00:27 被阅读29次

经验

  • 练习做项目时,如果遇到不懂的就先跳过,先把功能实现,完成后再去想细节,不要一开始就去纠结不懂的知识点,否则会把时间拉的很长,从而打击学习热情

  • 如果想做出很炫的效果,一个很便捷的途径就是:引用别人写的库,要什么功能就引入什么功能,狂看说明文档.
    切记:不要去纠结人家是怎么实现的,做出来东西后再对有兴趣的部分去深究

  • 编写代码时,每添加修改一点功能,一定要记得

  • 解决网页访问404的办法是 加目录或减目录

  • 一般项目上线时不上传编译后的dist文件夹,而是将dist文件夹打包上传到服务器

git add .
git commit 
git push 

否则,无法追溯,体现不了git的价值**

前置知识

  • MVC MVVM 视频教程 在饥人谷的直播班11中有
  • ES6

问题记录

  • 引入scss文件时,路径文件均正确,但是提示:
    error: This relative module was not found:
    这是因为vue-cli默认没有安装sass、scss文件loader,执行下面命令安装:
npm i -D sass sass-loader scss scss-loader node-sass css-loader
// 如果这么安装报错就分开单独安装即可
  • 文件存放
    不是属于某个组件特有的css或者其他资源(如图片),都可以放到assets文件夹下,属于某个组件的css,写到组件内的style标签中

  • vue的组件中使用 scss 的方法

//  在style标签上添加 lang = "scss"
<style lang="scss">
</style>
  • 编写css时,最好在外层添加#id,提升优先级,能减少不必要的错误

  • 当实际显示的效果与预期效果不一致时,记得检查相关部分的css是否出现优先级 问题,导致样式被覆盖

知识点

  • svg标签默认是个inline-block元素
  • html中的事件传入的是一个函数调用,而不是函数名,
    如:
// 这个copyText()是js函数
<button onclick="copyText()">复制文本</button>

// 下面这样在js中才是加函数名
btn.onClick = fn;

// 上面两种写法的区别就是:<button>是在html中,而btn.onClick=fn是在js文件中
  • 在vue中传入字符串和传入变量
<ArrayEditor v-bind:items="workHistory" v-bind:labels="{company: '公司', content: '"工作内容'}" v-bind:title='"工作内容"'/>

上面代码中 v-bind:items="workHistory" 表示传递一个变量workHistory;而v-bind:title='"工作内容"'表示传递一个js的字符串,注意: 如果需要传递一个字符串进去,就不需要使用v-bind进行绑定了,直接使用:title="工作内容" 即可

  • 如果在Vue中要使用动画效果,有两种途径:
    • 使用纯CSS
    • 使用Vue中的transition

项目开发流程

  • Vue是以数据为中心,通过数据去渲染出DOM,因此,一般我们的开发流程是:先构建数据,数据构建完成后,MVVM会帮我们去渲染出DOM

  • 箭头函数:箭头函数的一个特点是:它不会改变this的指向,函数内的this与函数外的this相同

  • 将vue项目发布到github

    • 第一步:vi config/index.js, 如下:
      image.png
    • 第二步:删除.gitignore中的 dist 目录,表示将该目录上传到git上
    • 第三步: npm run build:重新编译
    • 第四步:上传到github上

安装初始化

外部引入

  • element-ui:
    引入方法及使用方法:查看文档

  • 使用svg symbol 作icon
    使用的icon地址
    不会使用就看文档:使用帮助
    总共分为这么几步:

    • 第一步:拷贝项目下面生成的symbol代码:
      //at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
    • 第二步:加入通用css代码(引入一次就行):
    <style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
    </style>
    
    • 第三步:挑选相应图标并获取类名,应用于页面:
    <svg class="icon" style="font-size: 100px">
      <use xlink:href="#icon-xxx"></use>
    </svg>
    

相关文章

网友评论

      本文标题:建立编辑器-vue项目

      本文链接:https://www.haomeiwen.com/subject/otymrxtx.html