一、创建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. sql 查询结果自定义排序

    sqlserver 使用case when then 语句来实现 select name from fruit order by case name end oracle 使用decode实现 ,,, ...

  2. C++Primer第五版——习题答案目录

    目前正在刷<C++Primer>这本书,会在博客上记录课后习题答案,答案仅供参考. 因为水平有限,如有有误之处,希望大家不吝指教,谢谢! 目录地址 使用的系统为:win 10,编译器:VS ...

  3. source insight 中文乱码解决方法

    options->preferences -> Files-> default encoding: 选择 GB2312 CP:936

  4. 转:Eclipse中web项目部署至Tomcat步骤

    原址:http://blog.csdn.net/lucklq/article/details/7621807 Eclipse的web工程至Tomcat默认的部署目录是在工程空间下,本文旨在将部署目录改 ...

  5. 用纯c语言完成16位模式下的引导程序

    gcc在16位模式下做引导程序遇到的问题太多了,不过费了很大劲逐一解决了. 自己的小demo也从一开始的1个扇区增加到了20几个扇区. 先上图做个标记,后面有时间再上代码.

  6. IVIEW TREE问题总结

    1. API得到的tree数组数据,在前端构造成iview tree格式,无法编辑或者无法再次选中的问题: 由于VUE不能检测到数据或对象的变动,官网文档有解释 由于 JavaScript 的限制,V ...

  7. jersey 开启gzip

    @Bean public ResourceConfig resourceConfig() { ResourceConfig resourceConfig = new ResourceConfig(); ...

  8. windows快速搭建FTP工具Serv-U FTP Server

    本文介绍一个简单的FTP工具,当然windows系统自带FTP工具,但是配置方法没有第三方工具来的简单可操作性好. 此工具用于搭建FTP环境,对于需要测试FTP上传功能具有极大帮助.例如球机抓拍图片上 ...

  9. turtle画戒指

    import turtleturtle.bgcolor('black')turtle.speed(5)turtle.pensize(3)for i in range(1,5): turtle.righ ...

  10. java web复习(二)

    三.四种属性范围及应用 setAttribute(String name,Object o)设置属性 getAttribute(String name)根据属性名取得属性 removeAttribut ...