Vue 3.0 个模块功能及介绍

  • es6-promise

对 jquery 的封装

in package.json


in main.js

意为: 包含 node-modules 目录 es6-promise 的  auto.js

  • babel-polyfill

转码器 ,能适应多个 browser

in main.js

 

 

vue component 笔记

怎么在html文件包含一个component :       learn from  https://vuejs.org/v2/guide/components.html


怎么引用 单独一个 .vue 文件

from

https://vuejs.org/v2/guide/components-registration.html

 

 

vue 开源 dashboard 程序的login 部分

所指的开源程序是 :

template 引用变量的写法

加 $t 是为了unicode , 如果不需要,直接写{{ $t(‘auth.welcome’) }}

auth.welcome 是从  /src/i18n 目录的 json 文件得来

引用是在  main.js

 


/src/main.js 里, 这样写:

是因为 vue.config.js 这样定义了别名

 

 

Vue 各种问题的解决方法

  • 当执行

    时 ,报错

这是因为.vue文件包含有这么一段代码

 

解决方法是 ;

不需要手动改  package.json , 会自动加进去

  • How to use Bootstrap 4 media query mixins

原因是第一个例子中有这句代码

出自 Bootstrap 4 media query mixins

Bootstrap 4 media query mixins 的作用是 : 设置页面的布局 , 当size发生变化时 , 触发相应的断点 

详见  https://mdbootstrap.com/docs/vue/layout/overview/

https://mdbootstrap.com/docs/vue/layout/grid-usage/

解决方法是 :

package.json  dependencies 加

devDependencies  加

之后 nmp install

跟目录加  vue.config.js , 内容为

把 vuestic-admin-master 的  sass 和 vuestic-theme 文件夹copy 过去

  • 如何在 vs code debug Vue

需要先载入folder

最初的 json是

 

  • 怎么在 component 里使用另一个 component

详细见

  • 怎么在 vue 使用  scss

https://flaviocopes.com/vue-using-scss/

  • .vue 文件的   $t 是什么意思

是支持 unicode的意思 , 可以去掉

  • 怎么载入  scss

例子程序的scss 文件在 :   F:\code\Vue\vuestic-admin-master\src\vuestic-theme\vuestic-sass\overrides\_material-forms.scss

  • 为什么用 vue_cli 3.0 建立的程序一开始没有  vue.config.js

因为默认的并不需要,将来如果用到, 可以自己加

Where is the config files and why isn’t it anywhere in the top level folders, etc?

The initial project doesn’t require the file to exist because you just created a project with fresh “default” settings that don’t require any config.

Just create it yourself. it’s even mentioned in the README:

Many aspects of a Vue CLI project can be configured by placing a vue.config.js file at the root of your project. The file may already exist depending on the features you selected when creating the project.

(emphasis mine)

Edit: now to be found here: https://cli.vuejs.org/config/#global-cli-config

**********   vue开源程序的  vue.config.js是这样的

 

vue名词和概念

  • vue-route

不像是以前一样点击  url 去服务器 request page  , 而是在本地 已经load 完成的页面之间转

in  package.json

 

vue如何新建一个项目

  • 用 cli 3 工具新建
  • 新建 , 选手动

完成后占5g空间  , wtf   (在马来机器上只有 130MB ,  本机有问题)

  • 让 win10 像 linux 那样显示 folder树形结构

From https://stackoverflow.com/questions/9518646/tree-view-of-a-directory-folder-in-windows

  • 加login 页面

learn from https://www.thepolyglotdeveloper.com/2018/04/simple-user-login-vuejs-web-application/

  • 生成 dist

HTML Notes

  • scss是什么

CSS is the styling language that any browser understands to style webpages.

SCSS is a special type of file for SASS, a program written in Ruby that assembles CSS style sheets for a browser, and for information SASS adds lots of additional functionality to CSS like variables, nesting and more which can make writing CSS easier and faster. SCSS files are processed by the server running a web app to output a traditional CSS that your browser can understand.

例子 :

  • webpack 是什么

大致是一个编译打包工具

  • 怎么加入 css

一种方法

如果样式表简单, 直接写在 head 里

 

还有inline  css

 


padding , margin , etc


css 模板站  :  https://templated.co

 

 

安装使用 Vue

  • 新建一个目录, 随便起名, 这里叫  Vue
  • 下载客户端工具

    • 查看客户工具版本

 

  • 用客户端工具新建一个 pwa 应用

  • 这个是 cli 2的用法 ,  cli 3 是

 

  • 来源网站

https://www.runoob.com/vue2/vue-install.html

安装部分


https://hackernoon.com/a-progressive-web-app-in-vue-tutorial-part-1-the-vue-app-f9231b032a0b

新建项目 ,

是用的 vue 2.0 做例子 ,没什么参考价值了


https://www.smashingmagazine.com/2019/02/interactive-weather-dashboard-api-vue-js/

用 vue 建一个 天气的  dashboard

 

另外一个 dashboard   https://tips4devs.com/articles/build-a-responsive-dashboard-with-vue-js/


spring boot 做 rest server ,  vue 做 client ,  crud

https://developer.okta.com/blog/2018/11/20/build-crud-spring-and-vue

 


怎么把从 rest 取到的数显示在 table 里

https://stackoverflow.com/questions/41270522/populate-table-in-vue-template-component-from-rest-api

 


到现在为止 2019-06-18  12:00:00AM

发现的最好的教程

https://dev.to/vuevixens/hands-on-vuejs-for-beginners-part-1-2j2g

https://juejin.im/entry/58f48484da2f60005d3cb46c

https://www.vuemastery.com/   这个是收费的 

https://www.jeffjade.com/2019/01/13/146-awesome-vue-cli3-example/   中文


开源免费的vue dashboard

https://github.com/creativetimofficial/ct-vue-paper-dashboard-pro

 

https://learninglaravel.net/vuestic-admin-dashboard-powered-by-vuejs   这个更好一点 

上一个网址的git 是

 

 

 

  • vue 怎么定义 templete

a)  直接写在 js 文件里  或者 html 页面里

b) SFC  single file component  最主流的办法


  • 带源码的 side bar

https://mdbootstrap.com/docs/vue/navigation/sidenav/

 

  • tips

a) vue 没有页面的概念, 全是组件 , 在不同组件之间切换用  vue-router , 组件以 .vue结尾

b)Vue.js使用vue-router构建单页应用

 

c) 写好 component之后用 webpack 编译打包 , webpack 需要: 入口js文件:main.js

d)  vue 的  render

https://vuejs.org/v2/guide/render-function.html

官方文档

https://www.cnblogs.com/tugenhua0707/p/7528621.html

cnblog 文章