纯手工撸一个vue框架
前言
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内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更 ...
- 徒手生撸一个验证框架，API 参数校验不再怕！
你们之中大概率早已练就了代码的拷贝.粘贴,无敌的码农神功,其实做久了业务功能开发,练就这两个无敌神功,那是迟早的事儿.今天先抛一个小问题,来打通你的任督二脉,就是很好奇的问一下:业务功能开发中,输入参 ...
- 老司机教你用原生JDK 撸一个 MVC 框架！！！
其实 Spring MVC 是一个基于请求驱动的 Web 框架,并且也使用了前端控制器模式来进行设计,再根据请求映射规则分发给相应的页面控制器进行处理,具体工作原理见下图. 在这里,就不详细谈相关的原 ...
- 从零开始徒手撸一个vue的toast弹窗组件
相信普通的vue组件大家都会写,定义 -> 引入 -> 注册 -> 使用,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): ...
- 撸一个 vue 的截图组件，按比例截取
<template> <div class="clip-img" :style="imgStyle"> <img :src=&qu ...
- 纯手工编写的PE可执行程序
[文章标题]: 纯手工编写的PE可执行程序[文章作者]: Kinney[下载地址]: 自己搜索下载[使用工具]: C32[操作平台]: win 7[作者声明]: 只是感兴趣,没有其他目的.失误之处敬请 ...
- 纯手工打造漂亮的瀑布流，五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox！
前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...
- [置顶] 纯手工打造漂亮的瀑布流，五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox！
前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...
- 纯手撸web框架
纯手撸web框架 一.Web应用的组成 接下来我们学习的目的是为了开发一个Web应用程序,而Web应用程序是基于B/S架构的,其中B指的是浏览器,负责向S端发送请求信息,而S端会根据接收到的请求信息返 ...
随机推荐
- 【故障公告】redis内存耗尽造成博客后台无法保存
非常抱歉,今天上午11:00~11:30左右,由于 redis 服务器内存耗尽造成博客后台故障--保存博文时总是提示"请求太过频繁,请稍后再试",由此给您带来麻烦,请您谅解. 由于 ...
- Winform程序及dll打包成一个可执行的exe
使用场景 通常开发的Winform程序,引用了其他类库后,在输出目录下都会产生很多DLL文件,exe执行时必须依赖这些DLL.想要Winform程序只有一个可执行exe文件,又不想打包成安装包,就可以 ...
- 安装篇七：配置 Nginx 使其支持 PHP 应用
配置说明(NGINX-PHP) (让nginx php(中间件)之间建立关系):nginx--php建立关系---fastcgi---cgi 第一个里程: 编写nginx虚拟主机配置文件 第二个里程 ...
- Flutter低版本迁移到高版本
记录一次Flutter v1.12.13+hotfix.8 升级到1.22.4(当前最新) 后 ,旧项目的适配过程 工具:Android Studio 4.1.1 1.android 的MainAct ...
- 6.自定义view-侧边字母导航LetterNavigationBar
1.效果 2.实现原理 1.绘制右侧的字母 2.onTouchEvent 中获取点击.滑动的位置,在通过invalidate() 去重新绘制, 回调给activity去处理中间显示的文字 核心代码 ...
- Astra示例程序库正式上线啦
新上线的Astra示例程序库提供了基于多种编程语言和框架使用Astra的例子.借助这个示例程序库,你可以在短时间内建构起数据库.创建多个表.装载示例数据并部署基于Cassandra的应用程序. 什么是 ...
- 如何对项目中的问题进行分析——FPGA失败案例小结
本人最近在做一个小项目,自己取名叫做<基于zedboard的千兆以太网底层设计>,一般我都是写好各模块的verilog代码,确定模块没bug后再做整个系统级联,之后直接先进行综合看看有没有 ...
- 【kinetic】操作系统探索总结（八）键盘控制
如果尝试过前面的例子,有没有感觉每次让机器人移动还要在终端里输入指令,这也太麻烦了,有没有办法通过键盘来控制机器人的移动呢?答案室当然的了.我研究了其他几个机器人键盘控制的代码,还是有所收获的,最后移 ...
- leetcode上面用刷题不要使用static静态变量
因为leetcode上面每个测试用例会使用之前的同一个类,使用静态变量会导致静态变量的值不被初始话从而使得本次测试用例,之前的静态变量,从而导致错误发生.
- intellij IDEA Mybatis入门案例
最近打算学习ssm框架 Mybatis 作为入门的第一个持久层框架,学习起来实在费劲.故写此文章作为入门案例. 先打开 IDEA建立一个Maven项目,目录结构如下: 源代码已经上传至GitHub ...