一、创建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. RabbitMQ tutorial

    一.安装RabbitMQ RabbitMQ是一套开源(MPL)的消息队列服务软件,是由 LShift 提供的一个 Advanced Message Queuing Protocol (AMQP) 的开 ...

  2. Pyrit help

    Pyrit 0.5.1 (C) 2008-2011 Lukas Lueg - 2015 John Morahttps://github.com/JPaulMora/PyritThis code is ...

  3. ntp服务

    ntp服务主要是用于对计算机的时间同步管理操作.时间是对服务器来说是很重要的,一般很多网站都需要读取服务器时间来记录相关信息,如果时间不准,则可能造成很大的影响,对于集群,也需要时间同步. 部署安装N ...

  4. php中上传图片,原生代码

    一.实现图片上传方法一 html的写法: <form action="handle.php" name="form" method="post& ...

  5. Android开发 Context详解与类型 转载

    转载地址:https://blog.csdn.net/guolin_blog/article/details/47028975 个人总结: Context分为 activity : activity其 ...

  6. 001.[python学习]写在前面的

    0.多动手写写也许你所说的问题就不是问题: 1.最好的帮助文档是dir和help,如下图: 2.如果为了快速完成任务可以选择IDE,否则尽量不要依赖它,因为它的智能导致自己的无能: 3.也许有其他语言 ...

  7. uva-507

    题意:连续序列和最大,直接枚举..... 代码跑了2.4s.QAQ #include <string> #include<iostream> #include<map&g ...

  8. IntelliJ IDEA SVN突然没有了

    1.在IDEA中找不到 SVN 的选项了,版本控制工具中没有subversion,在setting中也无法查询到对应的svn工具,这是因为我们在idea的svn插件中把svn这个选项禁用了 解决办法: ...

  9. arcgis10.2 sde配置

    本机配置好oracle11g server 64位+client 32位.

  10. python-day7-静态方法、类方法、属性方法、特殊成员方法、反射、异常处理、socket

    @特殊方法.异常处理.反射.socket @类 属性 实例变量 类变量 私有属性__var 方法 构造方法, 析构函数(python自带,不写也有,写了相当与重构) 私有方法 继承 继承 组合 @7. ...