前言

  • 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. C# NPOI Excel多级表头导出多个表

    下载地址:https://files.cnblogs.com/files/netlock/NPOIDemo.rar

  2. ribbon源码分析

    对于ribbon的使用我们只需要在RestTemplate的申明上面加上 @LoadBalanced 注解之后那么这个RestTemplate就具有了负载均衡的功能 ribbon是怎么实现这一功能的? ...

  3. idea中Server returns invalid timezone. Go to 'Advanced' tab and set 'serverTimezone' property manually.

    我本机安装的mysql版本是5.7的,那么IDEA要连接mysql也应该匹配下驱动版本.把Driver改成MySQL for 5.1就可以了 在点击Test Connection测试下,成功啦!

  4. 转载--对batch normalization的理解

    转载的大神的: https://www.cnblogs.com/guoyaohua/p/8724433.html 上边这个应该是抄的下边这个原文,但是上边的有重点标记 https://blog.csd ...

  5. [LeetCode]147. Insertion Sort List链表排序

    插入排序的基本思想 把排好的放在一个新的变量中,每次拿出新的,排进去 这个新的变量要有超前节点,因为第一个节点可能会有变动 public ListNode insertionSortList(List ...

  6. 【探索之路】机器人篇(5)-Gazebo物理仿真环境搭建_让机器人运动起来

    如果完成了前两步,那么其实我们已经可以去连接我们的现实中的机器人了. 但是,做机器人所需要的材料还没有到,所以我们这里先在电脑平台上仿真一下.这里我们用到的就算gazebo物理仿真环境,他能很好的和R ...

  7. flask从数据库反向导入Model以及出现报错No module named sqlacodegen.main

    使用flask的朋友肯定了解了flask_sqlalchemy,不了解的小伙伴也可以查看博文:Flask 操作Mysql数据库 - flask-sqlalchemy扩展 上面博文中讲解了如何将flas ...

  8. 为什么Elasticsearch不适合做数据存储?(转学习使用)

    一.问题描述 公司想尝试使用Elasticsearch来存一部分数据,以此缓解数据增长带来的对数据库的压力.在研究了一段时间后,发现Elasticsearch不适合作为数据存储使用. 二.理由如下 1 ...

  9. 【原创】Linux PCI驱动框架分析(三)

    背 景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本 ...

  10. 杭电OJ1062---Text Reverse(c++)(C++库getline的使用)

    Text Reverse Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tot ...