純手工擼一個vue框架
- 2021 年 1 月 29 日
- 筆記
- Serverless, vercel, 個人部落格, 前端
前言
-
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
