纯手工撸一个vue框架

前言：Vue最简单的结构

步骤

搭建最基本的结构

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

通过以下命令添加vue依赖
1
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，文件内容如下
1
2
3
4
5
import Vue from 'vue'

new Vue({
el: "#app"
})

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

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

1
2
3

"scripts": {
  "serve":"vue-cli-service serve"
}

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

通过以下命令添加vue-router依赖

1	npm i vue-router

在src目录下创建路由模板文件App.vue，内容如下

<template>
  <div id="app">
    <router-view />
  </div>
</template>

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

1
2
3

<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页面

1	npm run serve

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