vue-cli 3.0新特性 單手擼了個springboot+mybatis+druid（vue-cli-service 不是內部或外部命令）
概述
作為Vue的主要版本，Vue 3.0帶來了諸多的重大變更，不過，開發組也非常重視兼容性問題：除了渲染函數 API 和作用域插槽語法之外的所有內容都將保持不變，或者通過兼容性構建讓其與 2.x 保持兼容。總的來說，Vue 3.0 雖然會對頂級 API 進行重大的修整，但依然會保持與 2.x 的兼容。此外，2.x 的最后一個次要版本將成為 LTS，并在 3.0 發布后繼續享受 18 個月的 bug 和安全修復更新。
欲了解更多的詳情，可以參考下面的鏈接：Vue 3.0版本發布計劃
重構
代碼結構
為了實現更清晰、更易維護的源代碼架構，尤雨溪表示將從頭開始重寫 3.0，并將一些內部功能分解為單獨的包，以便隔離復雜性。如下圖是vue 3.0的源碼目錄結構圖。前文說過，Vue團隊打算在從零開始編寫 3.0 版本，為的是“達到更加清晰和更易維護的架構，特別是為了讓代碼的貢獻變得容易”。為了降低復雜性，對復雜性進行隔離，開發團隊將一些內部功能拆分為了多個單獨的包。例如，observer 模塊將成為一個單獨的包，擁有自己對外的 API 和自己的測試用例。
另外，代碼庫現在改為用 TypeScript 編寫，雖然這會使得“熟練TypeScript”成為對新代碼庫進行貢獻的一個前置要求，不過我們相信有類型信息配合 IDE 的支持，對于一個新的貢獻者來說，要做出有意義的貢獻，實際上反而會更加容易。
除此之外，Vue還對改進編譯器、支持 IE 11、其他運行時改進和改進觀察機制等方面內容。
監測機制
3.0 將帶來一個基于 Proxy 的 observer 實現，它可以提供覆蓋語言 (JavaScript——譯注) 全范圍的響應式能力，消除了當前 Vue 2 系列中基于 Object.defineProperty 所存在的一些局限，這些局限包括：
對屬性的添加、刪除動作的監測；
對數組基于下標的修改、對于 .length 修改的監測；
對 Map、Set、WeakMap 和 WeakSet 的支持；
另外，新的 observer還提供了如下的一些特性：
公開的用于創建 observable 的 API：這為小型到中型的應用提供了一種輕量級的、極其簡單的跨組件狀態管理解決方案。
默認為惰性監測（Lazy Observation）。在 2.x版本中，任何響應式數據，不管它的大小如何都會在啟動的時候監測功能。如果數據量很大的話，在應用啟動的時候就可能造成嚴重的性能消耗。而在3.x 版本中，只有應用的初始可見部分所用到的數據會被監測，更不用說這種監測方案本身其實也是更加快的。
更精準的變動通知：舉個例子：在 2.x 系列中，通過 Vue.set 強制添加一個新的屬性，將導致所有依賴于這個對象的 watch 函數都會被執行一次；而在 3.x 中，只有依賴于這個具體屬性的 watch 函數會被通知到。
不可變監測對象：我們可以創建一個對象的“不可變”版本，以此來阻止對他的修改——包括他的嵌套屬性，除非系統內部臨時解除了這個限制。這種機制可以用來凍結傳遞到組件屬性上的對象和處在 mutation 范圍外的 Vuex 狀態樹。
更好的調試能力：通過使用新增的 renderTracked 和 renderTriggered鉤子，我們可以精確地追蹤到一個組件發生重渲染的觸發時機和完成時機及其原因。
編譯器
Vue 3.0與編譯器相關的代碼編譯將會有一個大的提升，用一句話概括為：“搖樹友好”的輸出；更多的 AOT 優化；更良好的解析錯誤；支持 source map。
如果采用的是支持“搖樹優化”的打包器，模板中使用到的那些可選特性，在生成的代碼中將通過 ES的模塊語法導入；而在打包后的文件中，那些沒用到的可選特性就會被“搖掉”。
由于新的虛擬 DOM 實現所帶來的提升，我們可以執行一些更加高效的編譯耗時優化，如靜態樹提升(static tree hoisting)、靜態屬性提升(static props hoisting)；以及為運行時提供一些來自編譯器的提示，以此避開子組件的規范過程 (children normalization)；提供VNode 快速創建路徑等等。
解析器重寫，以便在對模板進行編譯發生錯誤時，可以提供錯誤發生的位置信息；除此之外還可以帶來對模板的 source map支持；還可以支持第三方工具如 eslint-plugin-vue 和 IDE 的語言服務 (language services) 特性。
IE 11兼容
當然，Vue 3.0還處于開發階段，最早發布也會等到2019年了，讓我們拭目以待吧。
vue-cli 3.0
vue-cli 是 vue 官方團隊推出的一款快速開發 vue 項目的構建工具，具有開箱即用并且提供簡潔的自定義配置等功能。 vue-cli 從 2.0 到 3.0 修改了眾多的東西，下面就讓我們來了解下。
創建項目
從vue-cli 3.0開始，vue的安裝命令從vue-cli 改成了 @vue/cli。例如：
npm?install?-g?@vue/cli
使用vue-cli 3.0創建項目的命令如下：
vue?create?my-project
除了命令創建外，3.0還增加了圖形化界面創建以及管理vue項目的功能， 在創建新項目時還可以混合選用多種集成。當我們使用vue ui命令后即可使用圖形化的方式來操作vue項目的源碼。
需要說明的是，在初始化項目時系統會默認生成package.json和package-lock.json兩個配置文件，它們的區別在于package.json只能鎖定大版本號，而package-lock.json則能鎖定安裝時包的版本號，以保證多人開發時項目版本號的一致。同時，Vue在3.0版本刪除了static目錄，并新增了public目錄，該目錄主要用于存放不被webpack處理的文件和資源。
當我們使用create命令創建項目時，系統會要求我們選擇一些東西。例如：
Vue?CLI?v3.0.3 ??Please?pick?a?preset:??default?(babel,?eslint) >?Manually?select?features
Vue 3.0 版本支持預設配置 和 用戶自定義配置，其中自定義功能配置包括以下功能：
TypeScript
Progressive Web App (PWA) Support
Router
Vuex
CSS Pre-processors
Linter / Formatter
Unit Testing
E2E Testing
可以發現，3.0 版本新加入了 TypeScript 以及 PWA 的支持。
1，在選擇 CSS 預處理器后會提示選擇哪一種預處理器？
Scss/Sass
Less
Stylus
2，eslint 規范的選擇
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
3，選擇 Babel，PostCSS，ESLint 等自定義配置的存放位置
In dedicated config files
In package.json
目錄結構
相比于Vue 2.0版本來說，Vue 3.0的目錄結構則簡潔很多，下面是Vue項目文件的具體含義及其作用說明。 * node_modules：項目依賴的第三方模塊； * public：移除static目錄，新增public目錄，并且 index.html 移動到 public 中，該目錄主要用于存放如圖片、字體等靜態資源和打包后的文件； * src：源碼存放目錄，主要可以存放的有assets資源文件和源代碼； * babelrc：將es6代碼轉換成瀏覽器能夠識別的代碼； * editorconfig：定義項目編碼規范，優先級高于編譯器設置的優先級； * index.html：項目入口文件，可以配置meta 信息或統計代碼等； * package.json：項目配置文件，該文件主要定義了項目所需要的各種依賴模塊和項目的一些配置信息； * package-lock.json：鎖定安裝時包的版本號，多人協作開發會用到； * webpack.config.js：webpack模塊化打包的一些配置；
自定義配置
從 3.0 版本開始，系統會在項目的根目錄生成一個 vue.config.js 文件，可以在此文件中添加自定義的一些配置。下面是一些常用的自定義配置：
module.exports?=?{??baseUrl:?'/',??outputDir:?'dist',??lintOnSave:?true,??compiler:?false, ??//?調整內部的?webpack?配置。 ??//?查閱?https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md??chainWebpack:?()?=>?{},??configureWebpack:?()?=>?{}, ??//?配置?webpack-dev-server?行為。??devServer:?{????open:?process.platform?===?'darwin',????host:?'0.0.0.0',????port:?8080,????https:?false,????hotOnly:?false, ????//?查閱?https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理????proxy:?null,?//?string?|?Object????before:?app?=>?{} ??} ??....}
調整 webpack 配置最簡單的方式就是在vue.config.js中的configureWebpack選項提供一個對象，該對象將會被webpack-merge合并入最終的 webpack 配置。例如：
module.exports?=?{ ??configureWebpack:?{ ????plugins:?[??????new?MyAwesomeWebpackPlugin() ????] ??} }
如果想要修改插件選項的參數，讀者可以閱讀webpack-chain 的 API 獲取更多相關的一些源碼。例如：
//?vue.config.jsmodule.exports?=?{??chainWebpack:?config?=>?{ ????config ??????.plugin('html') ??????.tap(args?=>?{????????return?[/*?new?args?to?pass?to?html-webpack-plugin's?constructor?*/] ??????}) ??} }
需要說明的是，當我們更改一個 webpack 配置的時候，可以通過vue inspect > output.js輸出完整的配置清單，注意它輸出的并不是一個有效的 webpack 配置文件，而是一個用于審查的被序列化的格式。
ESLint、Babel、browserslist
Babel 可以通過.babelrc 或 package.json 中的 babel 字段進行配置。
ESLint 可以通過.eslintrc 或 package.json 中的 eslintConfig 字段進行配置。
package.json 中的 browserslist 字段指定了該項目的目標瀏覽器支持范圍。
browserslist
我們可以在package.json配置文件中看到browserslist字段。例如：
>?1% last?2?versionsnot?ie?<=?8
使用 npx browserslist 可以查看項目的瀏覽器兼容情況，vue的支持情況如下表：
public目錄
vue 約定public/index.html作為入口模板會通過html-webpack-plugin插件處理。在構建過程中，資源鏈接將會自動注入其中。除此之外，vue-cli 也自動注入資源提示（preload/prefetch），在啟用 PWA 插件時注入manifest/icon/鏈接，并引入(inlines) webpack runtime / chunk manifest清單已獲得最佳性能。
在 JavaScript 或者 SCSS 中通過 相對路徑 引用的資源會經過 webpack 處理，放置在 public 文件夾的資源可以通過絕對路徑引用，這些資源將會被復制，而不經過 webpack 處理。
并且，圖片最好使用相對路徑經過 webpack 處理，這樣可以避免很多因為修改網站根目錄導致的圖片404問題。
新增功能
除此之外，Vue-cli還帶來了兩個比較有誘惑力的功能：對TypeScript和PWA的支持；
TypeScript 支持
從 3.0 版本開始中，系統選擇啟用 TypeScript 語法，從而大大的簡化了代碼，不過也帶來了一些書寫上的約束。例如：
import?{?Component,?Emit,?Inject,?Model,?Prop,?Provide,?Vue,?Watch?}?from?'vue-property-decorator'const?s?=?Symbol('baz')@Componentexport?class?MyComponent?extends?Vue?{?@Emit() ?addToCount(n:?number){?this.count?+=?n?}?@Emit('reset') ?resetCount(){?this.count?=?0?}?@Inject()?foo:?string ?@Inject('bar')?bar:?string ?@Inject(s)?baz:?string ?@Model('change')?checked:?boolean ?@Prop() ?propA:?number ?@Prop({?default:?'default?value'?}) ?propB:?string ?@Prop([String,?Boolean]) ?propC:?string?|?boolean ?@Provide()?foo?=?'foo' ?@Provide('bar')?baz?=?'bar' ?@Watch('child') ?onChildChanged(val:?string,?oldVal:?string)?{?}?@Watch('person',?{?immediate:?true,?deep:?true?}) ?onPersonChanged(val:?Person,?oldVal:?Person)?{?} }
上面的代碼等價于下面的代碼：
const?s?=?Symbol('baz') export?const?MyComponent?=?Vue.extend({ ??name:?'MyComponent', ??inject:?{ ????foo:?'foo', ????bar:?'bar', ????[s]:?s ??}, ??model:?{ ????prop:?'checked', ????event:?'change' ??}, ??props:?{ ????checked:?Boolean, ????propA:?Number, ????propB:?{ ??????type:?String,??????default:?'default?value' ????}, ????propC:?[String,?Boolean], ??},??data?()?{????return?{ ??????foo:?'foo', ??????baz:?'bar' ????} ??}, ??provide?()?{????return?{ ??????foo:?this.foo, ??????bar:?this.baz ????} ??}, ??methods:?{ ????addToCount(n){??????this.count?+=?n??????this.$emit("add-to-count",?n) ????}, ????resetCount(){??????this.count?=?0 ??????this.$emit("reset") ????}, ????onChildChanged(val,?oldVal)?{?}, ????onPersonChanged(val,?oldVal)?{?} ??}, ??watch:?{????'child':?{ ??????handler:?'onChildChanged', ??????immediate:?false, ??????deep:?false ????},????'person':?{ ??????handler:?'onPersonChanged', ??????immediate:?true, ??????deep:?true ????} ??} })
可以發現，使用TypeScript語法后，代碼大為精簡。
PWA 支持
當我們選擇啟用 PWA 功能時，在打包生成的代碼時會默認生成 service-worker.js 和 manifest.json 相關文件。熟悉PWA的同學都知道service-worker.js 和 manifest.json 是PWA的重要配置文件。如果讀者還不了解 PWA，點擊?PWA官方文檔?查看。
默認情況 service-worker 采用的是 precache，可以通過配置 pwa.workboxPluginMode 自定義緩存策略。例如：
module.exports?=?{??//?...其它?vue-cli?插件選項... ??pwa:?{ ????workboxPluginMode:?'InjectManifest', ????workboxOptions:?{??????//?swSrc?中?InjectManifest?模式下是必填的。 ??????swSrc:?'dev/sw.js',??????//?...其它?Workbox?選項... ????}, ??}, };
vue-cli 致力于將 Vue 生態中的工具基礎標準化，并確保各種構建工具能夠基于智能的默認配置即可平衡銜接，提高開發效率。雖然，vue 3.0還處于開發階段，不過相信在不久的將來一定會給開發者帶來驚喜，讓我們拭目以待吧。
參考： http://www.php.cn/js-tutorial-400475.html https://github.com/vuejs/vue-cli/
https://github.com/vuejs/vue-cli/blob/dev/docs/README.md
云社區云博客博客詳情
單手擼了個springboot+mybatis+druid
橘座發表于 2019-10-14 18:42:45
1??0??0
編輯刪除
軟件開發云
本文旨在用最通俗的語言講述最枯燥的基本知識
文章提綱： 1. 創建springboot工程 2. 配置pom.xml 3. 配置數據源 4. 設置mybatis 5. hello world 6. 設置Druid監控配置
1. 創建springboot工程
只要你有idea，創建一個springboot工程，就跟捏死一個螞蟻一樣簡單，因為idea里深度集成了對springboot項目的支持，你直接不停的next到最后，它就會幫你創建出一個springboot工程。 1. 首先打開idea->Create New project->選擇項目類型：這里選擇spring initializr，然后next。
創建項目，填寫項目名稱，注意：不要能駝峰寫法，可以用中橫線,填寫完畢后繼續next。
選擇依賴，所謂依賴就是你在設計這個項目的框架時，分析這個項目需要用到哪些jar或者組件，比如緩存要用到Redis，數據庫要用到MySQL等...這里因為演示項目，就不選擇太多其它亂七八糟的依賴了。
選好依賴之后，又是一路狂點next，直到最后finish一下，一個springboot項目就創建好了。
2. 配置pom.xml
想想，我們需要哪些jar？ 數據庫要用到mybatis，數據庫連接池要用到Druid、MySQL橋接器要用到mysql-connector，因此要maven倉庫(點我去倉庫)中找到搜索這些pom加進去。注意，mybatis要用mybatis-spring-boot-starter。
把上面這些pom放到pom.xml的dependencies中細心的老鐵會發現，MySQL的version里的內容是紅色的，這是什么原因呢？?這是因為我們引入pom時，這些版本的jar在本地maven倉庫還沒有，而Druid的pom里的version沒有顯示紅色，是因為之前的項目用到了這個版本的Druid，已經被下載到本地Maven倉庫里了。?因此我們需要把本地沒有的jar下載到本地倉庫，右鍵pom.xml彈出菜單，選擇Maven，彈出菜單選擇reimport
Reimport過程中再idea底部會有進度條顯示，等進度條消失，在觀察pom.xml，紅色已經消失，說明依賴已經裝備完成。
配置數據源
spring: ??#profiles:?dev ??messages: ????basename:?i18n/Messages,i18n/Pages ??datasource: ????type:?com.alibaba.druid.pool.DruidDataSource????#?配置當前要使用的數據源的操作類型 ????driver-class-name:?org.gjt.mm.mysql.Driver????????#?配置MySQL的驅動程序類 ????url:?jdbc:mysql://localhost：3306/wkt_stat???????????#?數據庫連接地址 ????username:?root??????????????????????????????????#?數據庫用戶名 ????password:?root????????????????????????????#?數據庫連接密碼 ????dbcp2:??????????????????????????????????????????#?進行數據庫連接池的配置 ??????min-idle:?5???????????????????????????????????#?數據庫連接池的最小維持連接數 ??????initial-size:?5???????????????????????????????#?初始化提供的連接數 ??????max-total:?5??????????????????????????????????#?最大的連接數 ??????max-wait-millis:?200??????????????????????????#?等待連接獲取的最大超時時間
4. 設置mybatis
繼續在application.yml中設置mybatis，mybatis的配置也簡單， 主要是為了設置mybatis的配置文件已經mapper文件所在。 1. 首先在resource目錄下創建一個mybatis-config.xml文件，文件內容為：
在main包中的根目錄下創建一個存放mapper實體的資源文件,在resource文件下創建一個文件夾mapper用來存放mapper的xml文件。
配置好資源文件路徑之后，就可以在application.yml中加入mybatis的配置了，如下是一個mybatis的配置內容：
#mybatis的mapper配置文件 mybatis: ??config-location:?classpath:mybatis-config.xml??#?mybatis配置文件所在路徑 ??#mapper-locations:?classpath:mapper/*.xml???#?所有的mapper映射文件 ??type-aliases-package:?com.becl.dao.mapper?#?定義所有操作類的別名所在包 debug:?true
最終application.yml的內容如下圖：4. 此時需要有一個數據庫表來做測試，我們在數據庫創建一個表，并且插入一條數據：
CREATE?TABLE?Memeber?( `id`??int(11)?NOT?NULL?AUTO_INCREMENT?, `name`??varchar(255)?NULL?, PRIMARY?KEY?(`id`) ); INSERT?INTO?memeber?VALUES(1,"jas")
在mapper包中創建Memeber的mapper接口：
public?interface?MemeberMapper?{????/** ?????*?根據ID獲取記錄 ?????*?@param?id ?????*?@return ?????*/ ????public?Map?findObjectById(Integer?id); }
在resource中的mapper文件夾創建memberMapper.xml，并且在mapper中增加一個findObjectById的SQL查詢語句。
5. hello world
走到這一步，基本上已經是大功告成了，我們來寫一個測試類試試，在根目錄創建一個controller的包，在包中創建一個Java類，如下：
@Controller@RequestMapping("/test")public?class?TestController?{????@Resource ????private?MemeberMapper?memeberMapper=null;???? ????@RequestMapping("/one")????@ResponseBody ????public?Map?testdb(){????????return??memeberMapper.findObjectById(1); ????} }
創建完之后，我們運行項目，找到啟動類MybatisAndDruidApplication右鍵run，發現報錯，提示沒有掃描到mapper包，為什么呢？那是mapper需要手動在啟動類中加入：
@MapperScan("com.example.mybatisanddruid.mapper")
這樣啟動類就變成：
@SpringBootApplication@MapperScan("com.example.mybatisanddruid.mapper")public?class?MybatisAndDruidApplication?{????public?static?void?main(String[]?args)?{ ????????SpringApplication.run(MybatisAndDruidApplication.class,?args); ????} }
再次運行，沒有報錯，在瀏覽器輸入：http://localhost:8888/test/one 輸出了ID為1的記錄：
{"name":"jas","id":1}
由此可見，springboot-mybatis已經搭建成功，此時有人會問，那Druid呢？
設置Druid監控配置
druid的使用需要做一些配置，現在我們來在根目錄下創建一個包config，在config包中間創建一個叫做DruidConfig.java，并且在里寫入下面的內容：
@Configurationpublic?class?DruidConfig?{????@Bean ????public?ServletRegistrationBean?druidServlet()?{?//?主要實現WEB監控的配置處理 ????????ServletRegistrationBean?servletRegistrationBean?=?new?ServletRegistrationBean(new?StatViewServlet(),?"/druid/*");?//?進行druid監控的配置處理操作 ????????servletRegistrationBean.addInitParameter("allow",????????????????"127.0.0.1,192.168.1.159");?//?白名單 ????????servletRegistrationBean.addInitParameter("deny",?"192.168.1.200");?//?黑名單 ????????servletRegistrationBean.addInitParameter("loginUsername",?"stat");?//?用戶名 ????????servletRegistrationBean.addInitParameter("loginPassword",?"Wkt_sTat_1031");?//?密碼 ????????servletRegistrationBean.addInitParameter("resetEnable",?"false");?//?是否可以重置數據源 ????????return?servletRegistrationBean?; ????}????@Bean ????public?FilterRegistrationBean?filterRegistrationBean()?{ ????????FilterRegistrationBean?filterRegistrationBean?=?new?FilterRegistrationBean()?; ????????filterRegistrationBean.setFilter(new?WebStatFilter()); ????????filterRegistrationBean.addUrlPatterns("/*");?//?所有請求進行監控處理 ????????filterRegistrationBean.addInitParameter("exclusions",?"*.js,*.gif,*.jpg,*.css,/druid/*");????????return?filterRegistrationBean?; ????}????@Bean ????@ConfigurationProperties(prefix?=?"spring.datasource")????public?DataSource?druidDataSource()?{????????return?new?DruidDataSource(); ????} ???? }
配置中的內容就不一一細講， 有興趣的直接百度一下druid就出來很多答案了，現在重新運行一下項目，運行成功之后，在瀏覽器中輸入：http://localhost:8888/druid 這時候，druid監控平臺就出現了
此時我們輸入在DruidConfig中設置的loginUsername和loginPassword點擊登錄，一個完整的druid監控管理平臺就呈現在我們啦~
Druid非常強大，在這里你可以查看SQL的執行情況、慢SQL、API請求情況等，根據這些可以做一些性能的調優，至于詳細的用法，就靠大家自行學習啦~
如果有老鐵需要項目源碼，請加我微信：sisi-ceo。
本文轉載自異步社區
API Vue
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
