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

maxis 计费相关

  • cap-gw 程序怎么编译

export—-> executable jar

 

  • 智能 IN 的选择

in_connection”:”88″  是在 collector 发送 request 的时候就 设置好的

和 mediator没关系

 

 

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 文章

 

用 python + flask 做一个实现基本 CRUD 的 rest api

环境  win10 64 bit , python 3.6

 

先建立一个虚拟目录

进入所建立虚拟目录的scripts 目录 , 执行

在虚拟目录跟目录执行

安装完成后执行

查看所安装的版本

在跟目录新建一个python 脚本 , 命名为  app.py

设置默认启动的脚本

启动

 

之后用浏览器访问web service ,即可看到返回结果


接下来, 如果实现 CRUD  api

新建脚本, 取名为 hello.py

 

设置为默认启动脚本

从  http://www.sqlitetutorial.net/sqlite-sample-database/

下载 sqlite example 数据库 :  chinook.db  ,copy 到 hello.py 同目录

启动flask

此时打开浏览器

即可看到 tracks 表的所有记录

到目前为止, 只是实现了查询

 

 

参考资料

https://www.codementor.io/sagaragarwal94/building-a-basic-restful-api-in-python-58k02xsiq

大部分对, 但是  这句

不对, 在我的环境应为


sqlite3 工具下载   https://www.sqlite.org/download.html

 


sqlite example 数据库 下载

http://www.sqlitetutorial.net/sqlite-sample-database/