一、创建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随笔记录的更多相关文章

  1. MapXtreme 随笔记录1

    最近在用MapXtreme做项目,随笔记录备忘. 声明:PubMapPara 静态类,后缀为静态类成员变量 1.加载地图 /// <summary> /// 地图工作空间文件路径 /// ...

  2. Vue 问题记录

    Vue 问题记录 汇总日常开发中遇到的关于vue的问题 VeeValidator 语言设置 校验消息默认是英文的,定义中文或其他语言的错误提示消息 import VeeValidate from 'v ...

  3. Hello vue.js的随笔记录

    数据双向绑定的script在组件定义位置后面才顶用. 使用它的话,引用js就好,比较简单. 声明一个vm对象,new Vue({}).这个构造里传一个对象,包含el:界面元素,data:数据,meth ...

  4. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  5. vue实战记录(五)- vue实现购物车功能之商品总金额计算和单选全选删除功能

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...

  6. vue实战记录(六)- vue实现购物车功能之地址列表选配

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(六) GitHub:sue ...

  7. vue实战记录(四)- vue实现购物车功能之过滤器的使用

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...

  8. vue实战记录(三)- vue实现购物车功能之渲染商品列表

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(三) GitHub:sue ...

  9. vue实战记录(二)- vue实现购物车功能之创建vue实例

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(二) GitHub:sue ...

随机推荐

  1. 2018-2019-20175334实验一《Java开发环境的熟悉》实验报告

    2018-2019-20175334实验一<Java开发环境的熟悉>实验报告 一.实验内容及步骤 实验一Java开发环境的熟悉-1 建立"自己学号exp1"的目录 在& ...

  2. S/Kademlia2007 翻译

    S/Kademlia:实现安全Key路由的可行方法 摘要 安全性是完全分散式P2P系统中的常见问题. 尽管关于如何创建一个安全的基于Key的路由协议存在几点建议,但一个可行的方法仍然无人参与. 在本文 ...

  3. docker-网络基础配置和dockerfile

    00x1: 端口映射: 如图:这就是把容器的 5000端口和主机的32768端口相映射,所以通过访问主机的32768端口就可以访问容器的web界面 这个端口是系统默认的如果自定义命令:docker r ...

  4. 使用原生JDBC循环读取文件并持久化到数据库

    先上代码: package com.demo.common.service; import java.io.File; import java.io.FileInputStream; import j ...

  5. IDEA 倒入maven项目下载很慢

    1.找到安装maven的路径 2.直接搜索settings.xml文件 <mirror> <!--This sends everything else to /public --&g ...

  6. springboot 问题总结

    一:返回格式化日期 如果我们是用fastjson处理成jsonString,可以通过下面两种方式处理 1,在接受实体上@JSONField(format="yyyy-MM-dd HH:mm: ...

  7. EXPDP 时报错ORA-31693,ORA-02354,ORA-01555

    使用数据泵导出数据库大表时报错: ORA-31693: 表数据对象 "**"."**" 无法加载/卸载并且被跳过, 错误如下:ORA-02354: 导出/导入数 ...

  8. B树与B+ 树

    本文转载自:http://www.cnblogs.com/yangecnu/p/Introduce-B-Tree-and-B-Plus-Tree.html 维基百科对B树的定义为“在计算机科学中,B树 ...

  9. Opencv与Qt (一)之运行测试读取图片

    刚刚在vs上装好了QT和Opencv,试一下效果把. 我简单的创建了一个label,然后使用Opencv导入图像,因为Opencv导入图像是MAT格式的,在使用Qt的时候我们要把导入的图像转换成Qim ...

  10. vue与dajngo

    怎么说,网上找的例子真的不是一般的坑,根本就是少了很多流程让人故意看不懂 第一步,创建好我们的app django-admin startproject weeklyapp 这是创建我们的整个系统ap ...