Vue 4

視頻鏈接（講的針不戳）
界面元素：

目錄層級：

– node_modules:依賴文件

? 配置熱啟動的方法：

– public： 入口 index.html

– src ：資源（各個版本之間可以共享）

– router :

----- index.js

? 有兩種加載方式

// route level code-splitting -- 是否拆分（路由級別代碼）// this generates a separate chunk (about.[hash].js) for this route （是否將路由拆分成單獨塊文件）// which is lazy-loaded when the route is visited.（懶加載的方式）

----- main.js

? Vue.config.productionTip = false //阻止生產(chǎn)環(huán)境的模式

new Vue({router,render: h => h(App) // 將當(dāng)前元素掛載到 app ， ES6 的寫法，h 是超腳本// render:function(create){ ----- ES 5 寫法// return createElement(App) ----- 創(chuàng)建這個組件 （APP中全市組件）// } }).$mount('#app') //手動掛載

babel.js

package.json：十分重要的配置文件

// .json 文件 {"name": "vuelearn",//項目名稱"version": "0.1.0",//項目版本"private": true,"scripts": {//啟動命令"serve": "vue-cli-service serve",//打包命令"build": "vue-cli-service build"},//需要一起打包的文件"dependencies": {"core-js": "^3.6.5","vue": "^2.6.11","vue-router": "^3.2.0"},//丟棄的內(nèi)容"devDependencies": {"@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-router": "~4.5.0","@vue/cli-service": "~4.5.0","vue-template-compiler": "^2.6.11"},"browserslist": ["> 1%","last 2 versions","not dead"] }

從 vue 3 開始 越來越接近 react 的腳手架

與之前版本的區(qū)別：

位置舊版本新版本

import 導(dǎo)入	不需要(.vue)類型	需要

使用Element-UI

在VS code 中 使用 npm i element-ui -S下載Element-UI

使用import ElementUI from ‘element-ui’導(dǎo)入

Vue.use(ElementUI)

報錯To install them,you can run:npm install --save element-ui element-ui/lib/theme-chalk/index.css

在 cmd 中終止 并 運行 cnpm install --save element-ui

配置端口號等：

新建 vue.config.js 文件

寫入內(nèi)容

// JavaScript module.export={devServer:{port:8080, //對應(yīng)的端口號host:'localhost',open:true //配置瀏覽器自動打開} }

• 雜記：
• 接收參數(shù)

<!--Vue 接收參數(shù)--> <script> export default {name: 'HelloWorld',props: { // 接收參數(shù)msg: String // 形參 + 參數(shù)類型} } </script>

axiod.get**

axiod.get(地址).then(function(response){請求成功時觸發(fā)},function(err){請求失敗時觸發(fā)})

axiod.get(地址？查詢鍵值對).then(function(response){請求成功時觸發(fā)},function(err){請求失敗時觸發(fā)})

axiod.get(地址？key=value & key2=value2).then(function(response){請求成功時觸發(fā)},function(err){請求失敗時觸發(fā)})[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Hf9HZdNG-1603877079172)(/Users/hsk/Library/Application Support/typora-user-images/截屏2020-10-28上午10.17.26.png)]

總結(jié)

以上是生活随笔為你收集整理的【Vue 4 笔记 】（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。