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. hdu 思维风暴

    点击打开链接 偶然在杭电上看到的题目,数学题.好像是一道六年级奥赛题目,反正我是没有想出来,也知道往那上面想.就是找不到规律啊.学习了网上的方法, 这道题须要求出来多添加的点,就是与之前每条边添加的点 ...

  2. BitSet的使用

    有些程序须要处理二进制有序集,标准库提供了bitset 类型,其实,bitset 是一个二进制容器.容器中每个元素都是一位二进制码,或为 0,或为 1. bitset除了能够訪问指定下标的bit位以外 ...

  3. vim 脚本之快速打印log

    " zsl_log.vim " Version: 1.0 if exists("g:zsl_loaded_log") || &cp || v:versi ...

  4. .net framework tools

    https://docs.microsoft.com/en-us/dotnet/framework/tools/ Resgen.exe (Resource File Generator) Conver ...

  5. 同一台服务器部署多个WEB应用，SESSION冲突的解决方法

    由于一台服务器上使用Tomcat部署多个WEB项目,而项目因为用到框架都是一样的,导致同时运行,session相互冲突,这个登录后,那个就得重新登录,造成了使用不方便,解决办法如下: 在server. ...

  6. js易错点总结及 常见面试的坑

    最近在研究Javascript发现了其中一些比较灵异的事情.有点让人感到无语比如: var arr = [], arr2 = {}; console.log(typeof(arr) === typeo ...

  7. 15.C语言多线程实现变色龙以及cmd窗口标题变化

    #define _CRT_SECURE_NO_WARNINGS #include <stdlib.h> #include <stdio.h> #include <Wind ...

  8. 如何使用通用pe工具箱破解开机密码

    下载最新版的通用pe工具箱将u盘制作成启动盘,接着重启连续按热键进入到bios系统下,设置u盘为第一启动,保存重启. 1.这时候会进入通用pe工具箱的选择界面,我们选择第八个“运行Windows登陆密 ...

  9. ES6学习笔记（五）函数的扩展

    1.函数参数的默认值 1.1基本用法 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console. ...

  10. 安卓https

    http://www.tuicool.com/articles/NrmE3e http://blog.csdn.net/guestcode/article/details/50194357 http: ...