怎么产生vue文件_纯手工撸一个Vue框架

最新推荐文章于 2024-05-07 17:25:29 发布

weixin_39517199

最新推荐文章于 2024-05-07 17:25:29 发布

阅读量294

点赞数

文章标签：怎么产生vue文件

本文链接：https://blog.csdn.net/weixin_39517199/article/details/113708519

版权

前言

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)
})