纯手工撸一个vue框架

时间：2023-03-10 06:16:21
纯手工撸一个vue框架

前言

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

  • Vue最简单的结构

纯手工撸一个vue框架

步骤

搭建最基本的结构

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

纯手工撸一个vue框架

  • 通过以下命令添加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框架

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

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

相关文章