step 01 搭建乙個簡易的vue

2021-10-19 12:58:53 字數 1910 閱讀 3621

開始之前我們先來複習下vue,先搭建乙個簡單的vue專案。

目錄下執行 npm init 初始化專案。

根目錄新建乙個webpack.config.js檔案，並將移除package.json的main入口，在webpack.config.js裡定義入口檔案，並新增"private": true。

安裝webpack(webpack安裝的4.x版本,因為這時很多包在webpack5下會出問題,webpack-cli安裝的是3.x的版本)以及其他需要的包。



,"author":""


,"license"


:"isc"


,"devdependencies":,


"dependencies"


:}
// main.js


import vue from


'vue'


newvue


()
配置webpack.config.js。

const path =


require


('path'


)const htmlwebpackplugin =


require


('html-webpack-plugin'


)const vueloaderplugin =


require


('vue-loader/lib/plugin');


module.exports =


, module:,]


},plugins:


[new


htmlwebpackplugin()


,new


vueloaderplugin()


//解析.vue檔案的外掛程式


]}
現在執行 npm run build 命令，就會發現dist資料夾下已經打包好了index.html和main.bundle.js檔案，如果使用iis等開啟index.html你會發現頁面已經正常執行了。

現在我們使用webpack來建立開發環境

安裝 webpack-dev-server,在webpack.config.js加上

devserver:


,
package.json的script屬性裡加上"dev": 「webpack-dev-server」 這時候執行 npm run dev 服務就跑起來了。

加上路由,在src下建2個vue元件和router.js檔案

import vue from


'vue'


import router from


'vue-router'


import foo from


'./components/foo.vue'


import bar from


'./components/bar.vue'


vue.


use(router)


const routes =[,


]const router =


newrouter()


export


default router
將路由加到入口main.js

//其他**


newvue


()
加上樣式

安裝相應的包，在webpack.config.js加上loader

// 其他配置


module:,,


,]},


// 其他配置
注意順序，loader是從右到左解析，css-loader是將樣式解析成陣列(或物件)，style-loader再將陣列(或物件)解析成我們常見的css並注入到頁面。

原始碼位址

使用python flask搭建乙個簡易的伺服器

之前使用flask搭建了乙個簡易的伺服器，記錄如下 匯入需要的庫 coding utf 8 from flask import flask from flask import request,json import json from pil import image from download i...

JavaScript之實現乙個簡單的Vue

原文出處 wclimb vue的使用相信大家都很熟練了，使用起來簡單。但是大部分人不知道其內部的原理是怎麼樣的，今天我們就來一起實現乙個簡單的vue 實現之前我們得先看一下object.defineproperty的實現，因為vue主要是通過資料劫持來實現的，通過get set來完成資料的讀取和更新...

JavaScript之實現乙個簡單的Vue

vue的使用相信大家都很熟練了，使用起來簡單。但是大部分人不知道其內部的原理是怎麼樣的，今天我們就來一起實現乙個簡單的vue object.defineproperty 實現之前我們得先看一下object.defineproperty的實現，因為vue主要是通過資料劫持來實現的，通過get set來...