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. 零基础学python-5.6 数字位操作与其它工具

    1.位运算 python能够把整数当成二进制位来对待 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/ ...

  2. linux和Windows双系统让 Windows 把硬件时间当作 UTC

    linux和Windows双系统让 Windows 把硬件时间当作 UTC Windows设置如下:开 始->运行->CMD,打开命令行程序(Vista则要以管理员方式打开命令行程序方可有 ...

  3. Json与JsonPath

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,因为它良好的可读性与易于机器进行解析和生成等特性,在当前的数据整理和收集中得到了广泛的应用. JSON和XM ...

  4. shell的结构化命令

    shell在逻辑流程控制这里会根据设置的变量值的条件或其他命令的结果跳过一些命令或者循环执行的这些命令.这些命令通常称为结构化命令 1.if-then语句介绍 基本格式 if command then ...

  5. 使用 docker 安装多版本的 MySQL

    原文:使用 docker 安装多版本的 MySQL 首先从 docker 官网下载安装 docker. 检查 docker 安装是否成功,出现类似下面的信息就是安装好了 $ docker versio ...

  6. vector要注意的点

    vector的元素类别T,必须具备assignable和copyable两个性质. vector的容量很重要: 1. 一旦内存重新配置,和vector元素相关的所有references.pointer ...

  7. Swift Standard Library Reference.pdf

    Swift Standard Library Reference.pdf 下载地址 http://download.csdn.net/detail/swifttrain/7446331 自己的Mark ...

  8. CesiumJS - 3D Tiles BIM

    CesiumJS - 3D Tiles BIM eryar@163.com 1. Introduction CesiumJS is an open-source JavaScript library ...

  9. 深入分析JavaWeb Item23 -- jsp自己定义标签开发入门

    一.自己定义标签的作用 自己定义标签主要用于移除Jsp页面中的java代码. 二.自己定义标签开发和使用 2.1.自己定义标签开发步骤 1.编写一个实现Tag接口的Java类(标签处理器类) 要编写一 ...

  10. gvim window7 下提示乱码

    今天在win7下安装gvim的时候,发现所有的提示信息都是乱码的,在网上找到了如下的解决方案.在此记录下,方便以后查阅. 以下内容转载自http://blog.csdn.net/rehung/arch ...