前言

  • vue create 真的很方便，但是很多人欠缺的是手动撸一遍。有些人离开脚手架都不会开发了。

  • Vue最简单的结构

步骤

搭建最基本的结构

  • 打开空文件夹，通过 npm init 命令生成package.json

  • 通过以下命令添加vue依赖
npm i vue
  • 在工作根目录创建public文件夹，并创建下级文件index.html，文件内容如下
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Vue-Case-3</title>

</head>

<body>

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

</body>

</html>
  • 在工作根目录创建src文件夹，并创建下级文件main.js，文件内容如下
import Vue from 'vue'

new Vue({

    el: "#app"

})

此时在终端通过 vue-cli-service serve 命令就可以启动一个具有最简单结构的vue程序，我们继续优化

  • 修改package.json文件，以通过简单的npm run 命令运行项目，将scripts项修改如下
  "scripts": {

    "serve":"vue-cli-service serve"

  }

加入路由模板并加入路由功能

  • 通过以下命令添加vue-router依赖
npm i vue-router
  • 在src目录下创建路由模板文件App.vue，内容如下
<template>

  <div id="app">

    <router-view />

  </div>

</template>
  • 为了方便测试路由功能，在src下创建components文件夹，并在新目录下创建一个helloworld.vue文件，文件内容如下
<template>

  <div>Hello World!</div>

</template>
  • 在src目录下创建路由配置文件router.js，内容如下
import Vue from 'vue'

import VueRouter from 'vue-router'

import HW from './components/helloworld.vue'

Vue.use(VueRouter)//通过这个命令使<router-view />这个标签可被解析

var routes = [

    {

        path: '/hw',

        component: HW

    }

]

var router = new VueRouter({

    routes: routes

})

export default router
  • 在main.js文件中添加和路由相关的配置，以便使其生效，将main.js文件修改如下
import Vue from 'vue'

import App from './App.vue'

import router from './router.js'

new Vue({

    el: "#app",

    router: router,

    render: render => render(App)

})

至此，一个最最简单的具有路由跳转功能的vue项目搭建完毕。当然其实有更快速的方式去创建，比如使用vue create 命令，但是通过手撸的方式，会对vue的结构有更深入的理解。接下来查看一下手撸的结果！

  • 启动项目，并跳转到helloworld页面
npm run serve

完全手动创建一个vue项目还是蛮简单的。下一篇文章，我将基于这篇文章创建的项目，引入element-ui

转载自《纯手工撸一个vue框架》

纯手工撸一个vue框架的更多相关文章

  1. 撸一个vue的双向绑定

    1.前言 说起双向绑定可能大家都会说:Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更 ...

  2. 徒手生撸一个验证框架，API 参数校验不再怕！

    你们之中大概率早已练就了代码的拷贝.粘贴,无敌的码农神功,其实做久了业务功能开发,练就这两个无敌神功,那是迟早的事儿.今天先抛一个小问题,来打通你的任督二脉,就是很好奇的问一下:业务功能开发中,输入参 ...

  3. 老司机教你用原生JDK 撸一个 MVC 框架！！！

    其实 Spring MVC 是一个基于请求驱动的 Web 框架,并且也使用了前端控制器模式来进行设计,再根据请求映射规则分发给相应的页面控制器进行处理,具体工作原理见下图. 在这里,就不详细谈相关的原 ...

  4. 从零开始徒手撸一个vue的toast弹窗组件

    相信普通的vue组件大家都会写,定义 -> 引入 -> 注册 -> 使用,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): ...

  5. 撸一个 vue 的截图组件，按比例截取

    <template> <div class="clip-img" :style="imgStyle"> <img :src=&qu ...

  6. 纯手工编写的PE可执行程序

    [文章标题]: 纯手工编写的PE可执行程序[文章作者]: Kinney[下载地址]: 自己搜索下载[使用工具]: C32[操作平台]: win 7[作者声明]: 只是感兴趣,没有其他目的.失误之处敬请 ...

  7. 纯手工打造漂亮的瀑布流，五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox！

    前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...

  8. [置顶] 纯手工打造漂亮的瀑布流，五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox！

    前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...

  9. 纯手撸web框架

    纯手撸web框架 一.Web应用的组成 接下来我们学习的目的是为了开发一个Web应用程序,而Web应用程序是基于B/S架构的,其中B指的是浏览器,负责向S端发送请求信息,而S端会根据接收到的请求信息返 ...

随机推荐

  1. kvm环境部署及常用指令

    Linux下通过kvm创建虚拟机,通过vnc连接,做好配置后,通过ssh登录,并开启iptables Kvm虚拟化搭建教程参考链接:https://jingyan.baidu.com/article/ ...

  2. js Table表格选中一行变色或者多选 并获取值

    使用JQ <script> let old, oldColor; $("#sp_body tr").click(function (i) { if (old) oldC ...

  3. [从源码学设计]蚂蚁金服SOFARegistry之Data节点变更

    [从源码学设计]蚂蚁金服SOFARegistry之Data节点变更 目录 [从源码学设计]蚂蚁金服SOFARegistry之Data节点变更 0x00 摘要 0x02 引子 0x03 业务范畴 3.1 ...

  4. [从源码学设计]蚂蚁金服SOFARegistry 之 LocalDataServerChangeEvent及数据同步

    [从源码学设计]蚂蚁金服SOFARegistry 之 LocalDataServerChangeEvent及数据同步 目录 [从源码学设计]蚂蚁金服SOFARegistry 之 LocalDataSe ...

  5. 第一个开源控件：Google 官方下拉刷新控件 SwipeRefreshLayout 强化版，支持上拉刷新

    最近比较闲,所以趁着这时间撸了个SwipeRefreshLayout的加强版,Github地址. 原版只支持下拉刷新,强化之后支持上拉刷新和一进入页面就加载刷新,整个控件的加载动画是一致的,毫无违和感 ...

  6. 英特尔® 图形性能分析器（Intel® GPA）

    英特尔图形性能分析器概述 英特尔 GPA 是一套软件工具,它能提供平台级游戏性能分析功能,优化应用性能. 英特尔 GPA 包含以下组件: 英特尔 GPA 监控器 - 将英特尔 GPA 连接至应用(处于 ...

  7. Java IO流 FileOutputStream、FileInputStream的用法 　　

    FileOutputStream.FileInputStream的使用 FileOutputStream是OutputStream的继承类,它的主要功能就是向磁盘上写文件.FileOutputStre ...

  8. 第一章节 BJROBOT ROS 网络配置及移动控制【ROS全开源阿克曼转向智能网联无人驾驶车】

    版权声明:该教程版权归北京智能佳科技有限公司所有,未经公司授权禁止引用.发布.转载等,否则将追究其法律责任. 使用前说明:本使用文档说明略微简明,请结合指导视频进行操作会更容易理解!! 第一章节 BJ ...

  9. CentOS8设置网络镜像安装源

    CentOS8通过引导盘+网络镜像镜像源安装系统,设置网络镜像安装源为: mirrors.aliyun.com/centos/8/BaseOS/x86_64/os

  10. VsCode通过SSH连接远程服务器开发

    前言 nil 正文 安装插件 安装VsCode官方插件 Remote - SSH Remote - SSH: Editing Configuration Files WSL(远程桌面连接需要Remot ...