Vue随笔记录
一、创建Vue步骤(VS Code)
1、全局安装
npm install -g vue-cli
2、新建项目
vue init webpack "project-name"
3、安装依赖
npm i
4、运行
npm run dev
二、Vue架构
1)、记住“三个位置”:
1、router-->index.js(存放路由、路由组件、路由页面路径等)
注:此项目默认路径是“/”。在path下一行加入(redirect:“/test”),则项目默认路径为“/test”,即可显示HelloWorld.vue内容。

2、新建的Home.vue文件(包含Header组件、Footer组件、Sider组件、路由页面【router-view】,其中router-view组件是动态的,来自router-->index.js文件中路由引入的组件,本例中,router-view组件指的是HelloWorld.vue,地址是“/test”)

3、components或其他文件下的vue文件(即视图文件)

2)、架构“两个要点”:
1、布局写在Home.vue文件里面
2、在index.js文件里面配置路由,每一个router配置应该包含:引入Home.vue组件的名称,和显示router-view的组件路径。
Vue随笔记录的更多相关文章
- MapXtreme 随笔记录1
最近在用MapXtreme做项目,随笔记录备忘. 声明:PubMapPara 静态类,后缀为静态类成员变量 1.加载地图 /// <summary> /// 地图工作空间文件路径 /// ...
- Vue 问题记录
Vue 问题记录 汇总日常开发中遇到的关于vue的问题 VeeValidator 语言设置 校验消息默认是英文的,定义中文或其他语言的错误提示消息 import VeeValidate from 'v ...
- Hello vue.js的随笔记录
数据双向绑定的script在组件定义位置后面才顶用. 使用它的话,引用js就好,比较简单. 声明一个vm对象,new Vue({}).这个构造里传一个对象,包含el:界面元素,data:数据,meth ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- vue实战记录(五)- vue实现购物车功能之商品总金额计算和单选全选删除功能
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...
- vue实战记录(六)- vue实现购物车功能之地址列表选配
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(六) GitHub:sue ...
- vue实战记录(四)- vue实现购物车功能之过滤器的使用
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...
- vue实战记录(三)- vue实现购物车功能之渲染商品列表
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(三) GitHub:sue ...
- vue实战记录(二)- vue实现购物车功能之创建vue实例
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(二) GitHub:sue ...
随机推荐
- redis中key的过期键删除策略
Redis过期键删除策略 Redis key过期的方式有三种: 被动删除:当读/写一个已经过期的key时,会触发惰性删除策略,直接删除掉这个过期key 主动删除:由于惰性删除策略无法保证冷数据被及时删 ...
- three.js中的文字
1.三维文字 三维字体文字,使用的是FontLoader,字体文件通过来facetype.js生成 addCityText: function () { var self = this; var ci ...
- sqlserver 中NOLOCK、HOLDLOCK、UPDLOCK、TABLOCK、TABLOCKX
https://www.cnblogs.com/sthinker/p/5922967.html
- win10更新后出现System.ComponentModel.Win32Exception
win10更新后出现System.ComponentModel.Win32Exception 我的环境是由于“sql server2012 无法连接到WMI提供程序”引起的 参考http://www. ...
- js obj对象转formdata格式代码
import isArray from "lodash/isArray" export function objToFormData(config) { //对象转formdata ...
- liunx vi 学习
vi有两种状态:命令态和编辑态 命令态中常用的命令: 上下左右移动的处理4个箭头外还有h(左),j(下),k(上),l(右) 调到屏幕显示的首行H,尾行L,x行:xG 0将光标移动到行首:$到行尾,M ...
- NLTK——常用函数
1.Functions Defined for NLTK's Frequency Distributions Example Description fdist = FreqDist(samples) ...
- react-native shadow失效
做边框阴影,但是有时候会失效,内容产生阴影,而边框无效,今天发现了原因,没错,就是没有设置背景颜色导致的.如图
- 自动生成构造方法、getter、setter
前言 一直很想知道IDE是如何自动去生成类的构造和getter.setter方法,大概是有个想法,获取当前的类,利用反射去获取属性名和类型,然后生成,所以我想自己试试. 写个模板类 package ...
- java 日志脱敏框架 sensitive-新版本0.0.2-深度拷贝,属性为对象和集合的支持
项目介绍 日志脱敏是常见的安全需求.普通的基于工具类方法的方式,对代码的入侵性太强.编写起来又特别麻烦. 本项目提供基于注解的方式,并且内置了常见的脱敏方式,便于开发. 用户也可以基于自己的实际需要, ...