vue.min.js和vue-cli的区别和联系我现在还是没有太清楚，大概是还没搞清楚export default和new Vue的区别，先浅浅记录一下怎么“用vue-cli来写网页”。

　　“vue-cli是一个可以快速搭建大型单页应用的官方命令行工具。 ”在讨论这个问题前，先把项目的目录放出来（环境的配置和项目的创建在上一篇）：

　　

            • build 操作文件，通过npm run * 可执行其中的文件
            • config 配置文件
            • src 资源文件，所有的图片、组件都在这个文件夹内

　　开发阶段我们关注config的index.js和src文件夹，index.js文件包含了简单的环境配置，先来看看src和index.html，当我们在项目根目录使用npm run dev将初始的helloworld跑起来，然后访问127.0.0.1:8080，界面如下：

1、index.html+src

　　所谓的单页应用，大概因为整个vue项目中只存在一个html文件吧，所谓页面跳转，做的只是页内的界面的更新。对于整个项目，index.html是我们所见的内容，src\App.vue做的是所有页面共有的部分，真正编辑页面的是src\components中的vue文件，定义路由跳转（将components嵌入App.vue）在src\router，图片等资源文件放在src\assets，与后端交接数据通过的是vue界面中接口访问获取数据，如axios。

　　具体的如下所示

　　<1>index.html中我们只可以看到一个'#app'的div，作为项目网页的主体，我们可以在index.html中引入全局的js文件

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>vue-test</title>

    <script src="../static/lib/jquery-3.3.1.min.js"></script><!--可以在这里引入全局的js文件-->

  </head>

  <body>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

　　<2>src\mian.js可以看到为index.html中'#app'绑定App.vue的操作

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

})

　　<3>App.vue中可以编写所有网页公共的部分，如导航栏、页头页尾等等。其中的<router-view/>则是引入的子组件的位置，具体的联系之后再说。

<template>

  <div id="app">

    <img src="./assets/logo.png"><!--所有网页共有-->

    <router-view/><!--组件位置-->

  </div>

</template>

<script>

export default {

  name: 'App'

}

</script>

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

　　<4>components中放的是子组件.vue文件，如示例文件helloworld.vue，<temple></temple>元素中以单独一个div开始定义页面，在export default中绑定数据和页面。

　　<5>那么子组件是如何和App.vue联系起来的呢?通过router文件夹下的index.js联系的，如下图。

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/',

      name: 'HelloWorld',

      component: HelloWorld

    }

  ]

})

参考：

https://www.jianshu.com/p/09fcc8173a49

https://blog.csdn.net/wulala_hei/article/details/80488674

Vue的学习--怎么在vue-cli中写网页的更多相关文章

  1. vue初级学习--控制台创建vue项目

    一.导语 困困的我,好想睡啊,但还是敲下这边有的没的的笔记吧 二.正文 1.输入 vue list 可查看此环境下,vue能创建的项目模板 没将webpack.vue-route啃精了的话,老实用we ...

  2. Js 框架之Vue .JS学习记录 ① 与Vue 初识

    目录 与 Vue.js 认识 VUE.JS是个啥?有啥好处? Vue 的目标 战前准备  VUE.JS环境 VUE.JS 尝试一下,你就明白 第一步 实例化VUE 对象 第二步VueAPP 调用数据 ...

  3. Vue的学习总结之---Vue项目 前后端分离模式解决开发环境的跨域问题

    原文:https://blog.csdn.net/localhost_1314/article/details/83623526 在前后端分离的web开发中,我们与后台联调时,会遇到跨域的问题. 比如 ...

  4. vue入门学习（基础篇）

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  5. 在进行vue的学习，项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  6. Vue.js学习笔记：在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  7. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  8. vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

    第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

  9. Blazor和Vue对比学习（基础1.8）：Blazor中实现计算属性和数据监听

    1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...

随机推荐

  1. java设计模式学习 ----- 单例模式（Singleton）

    单例模式(Singleton) 单例对象(Singleton)是一种经常使用的设计模式. 在Java应用中,单例对象能保证在一个JVM中,该对象仅仅有一个实例存在.单例模式也分三种:懒汉式单例.饿汉式 ...

  2. poj--1488--TEX Quotes（水题）

    TEX Quotes Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 9672   Accepted: 5071 Descri ...

  3. jFinal 关联数据库操作

    1.建数据库(我用的是oracle数据库,其他的相对也差不多) -- Create table create table CLASSES ( classesid NUMBER not null, cl ...

  4. 14.c语言dll注入

    #include <Windows.h> //dll不需要main函数 //导出接口 _declspec(dllexport) void go() { MessageBoxA(, ); }

  5. P3908 异或之和

    题目描述 求1 \bigoplus 2 \bigoplus\cdots\bigoplus N1⨁2⨁⋯⨁N 的值. A \bigoplus BA⨁B 即AA , BB 按位异或. 输入输出格式 输入格 ...

  6. U-BOOT启动流程分析--start_armboot函数（二）

    第二阶段的功能: 初始化本阶段所需的硬件设备(主要设置系统时钟.初始化串口.Flash.网卡.USB) 检测系统内存映射(memory map) 将内核映像和根文件系统映象从Flash上读到RAM空间 ...

  7. TRIZ系列-创新原理-31-多孔材料原理

    多孔材料原理的详细描写叙述例如以下:1)让物体变成多孔的.或者使用辅助的多孔部件(如插入,覆盖):2)假设一个物体已经是多孔了,那么事先往里面填充某种物质:这个原理提出的原因是,一般机械系统通常都是由 ...

  8. POJ 3592 Instantaneous Transference（强连通+DP）

    POJ 3592 Instantaneous Transference 题目链接 题意:一个图.能往右和下走,然后有*能够传送到一个位置.'#'不能走.走过一个点能够获得该点上面的数字值,问最大能获得 ...

  9. Python画图工具matplotlib的安装

    今天在机子上安装matplotlib遇到一些问题,特将此记录下来,供大家分享以少走弯路. 1:下载matplotlib 去官网上下载你所须要的版本号http://matplotlib.org/down ...

  10. js---03属性操作

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...