Preface

Can't webpack, When you report an error, you are confused , I don't know what to do , And it's big and slow .

So you Yuxi did vite After that, I yearned for , I just know that my level is limited or I'll wait for the boss to go to the pit first , It's almost time to jump .

Now? vite2 Released , The official website also has , You can also find the relevant information written by the boss on the Internet , It's time to jump in .

So I plan to do an open source blog , While doing this little project , Learn the language vite2 and vue3, And related knowledge .

Why blog ? Because the function is relatively simple , Regardless of the skin and other functions .

And we are all familiar with , I haven't written a blog. I always read a blog .

So , In terms of business needs, we all know , No need to explain too much .

Build project

because GitHub Always can't connect , It's still slow , So I chose gitee. First in gitee Build a project on it :

https://gitee.com/naturefw/vue3-blog

then clone To local , The next step is to use vite2 Set up a project .

According to the official website (https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project) Introduce building projects .

yarn create @vitejs/app

Recommended here yarn, Because it can be faster .

  • Set project name :

Enter the name you like , Here we use vue3-blog.

  • Select template

I don't know what it is , Anyway vue That's right , If you like ts Words , Then you can choose vue-ts.

  • initialization

    Go to the project folder , perform yarn Install the required resource packs . Finally, execute yarn dev You can run the project .

  • Compare the volume of the project

    vite2 Created items :

Than vue-cli The projects built are much smaller , If you don't believe it, you can compare it :

  • Run the project

    If it is Windows Environment , You can do it bat file , The content is yarn dev , And save it as run.bat, Note the extension . Then double click on the file to run , It's more convenient .

There's no longer a long wait .

  • Look at the effect

It's always simple .

Installation routing

According to the official website (https://next.vuex.vuejs.org/installation.html#direct-download-cdn) How to install routing .( I think everyone will )

yarn add vuex@next --save

Or use yarn To install .

  • main Make settings inside
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // route createApp(App)
.use(router) // route
.mount('#app')

There is no difference between setting and using routing , So I won't say much .

Install lightweight state management

vite2 Also support Vuex Of , It's just a personal feeling Vuex It's a bit tedious. , So I made a lightweight state management , The blog project uses this vue-data-state Let's try , It depends on the actual use .

  • install
yarn add vue-data-state

  • Set up

    and Vuex More like , Make one first index.js File definition status , And then in main.js It 's mounted inside
// store-ds/index.js
import VuexDataState from 'vue-data-state' export default VuexDataState.createStore({
global: { // Global status
blogState: {
name:' The state of blog post ', // Test use
currentGroupId: 0, // Selected groups ID.0: No choice
currentArticleId: 0, // Selected articles ID.
editArticleId: 0 // The current revision of the article ID
},
dicussState: {
name: ' The state of the discussion '
}
},
local: { // Local state
// Data list , Register before use
dataListState() { // Display the status of the blog post list
return {
findKind: {}, // A query
find: {}, // Search keywords
page: { // Paging parameters
pageTotal: 100,
pageSize: 2,
pageIndex: 1,
orderBy: { id: false }
},
_query: {}, // Cached query conditions
isReload: false // Reload data , We need to count the total
}
}
},
// You can set the initial state for the global state , Synchronous data can be set directly on it , If it's asynchronous data , You can set it up here .
init(state) {
setTimeout(() => {
state.blogState.name = 'int The data set inside , Can be asynchronous '
},3000)
}
})

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // route
import store from './store-ds' // Lightweight state createApp(App)
.use(router) // route
.use(store) // Lightweight state
.mount('#app')

The specific usage is introduced later .

install element-plus

According to the official website (https://element-plus.gitee.io/#/zh-CN/component/installation) Introduction to installation element-plus

yarn add element-plus --save

vite2 Support a wide variety of UI library , Or support something UI library , In fact, it's still to see vue3.

There's no difference in usage .

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // route
import store from './store-ds' // Lightweight state // UI library
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn' createApp(App)
.use(router) // route
.use(store) // Lightweight state
.use(ElementPlus, { locale, size: 'small' }) // UI library
.mount('#app')

install v-md-editor

According to the official website (https://ckang1229.gitee.io/vue-markdown-editor/zh/quick-start.html# Installation support -vue3- Version of ) Introduce , install v-md-editor, For editing blog posts .

yarn add @kangc/v-md-editor@next

Be careful : You have to take it @next, Otherwise, in the vue3 It's going to report an error , Don't ask me how I know , It's not that I haven't read the document carefully .

All right, the shelf of the project is set up , The following is the specific implementation .

The next one is even better .

It's not easy to code words , Thank you for your kind words .

Learn from an open source blog Vite2 + Vue3 ( One ) More articles on building projects

  1. Based on open source blog system (mblog) Build a website

    Based on open source blog system (mblog) Build a website The last chapter talked about based on jpress Deployed blog system , This chapter is about mblog This open source is based on springboot The blog system , Compared with the jpress The heat of the fork The quantity should be less ...

  2. Based on open source blog system (jpress) Build a website

    Based on open source blog system (jpress) Build a website JPress Use Java8 Development , Based on popular JFinal and Jboot frame . at present JPress The built-in articles and pages are actually two modules , You can remove and add other modules , because ...

  3. 26 Species based on PHP Open source blog system

    26 Species based on PHP Open source blog system source : Original site  PHP Learning notes The following are listed PHP Open source Blog In the system , Except for what we know WordPress outside , Most of them haven't been used , Some of them have been eliminated , Or someone is still using it . Besides doing ...

  4. Java Programmer blog system recommendation ! I investigated 100 To a Java Open source blogging system , Find this 5 It's the best one to use !

    Hello everyone ! I am a Guide Brother ,Java The backend development . One will be a little bit front end , A free boy who loves cooking . Recently, I want to turn my blog upside down , Read a lot of ready-made relatively mature open source blog system , I also simply summarized and compared from the following dimensions : star Number ...

  5. Java Open source blog ——B3log Solo 0.6.6 The official version is published !

    Java Open source blog -- B3log Solo 0.6.6 The official version is published ! Welcome to download . This version number introduces the database connection pool :Druid. in addition , Welcome to see B3log New projects for the team :Noty, You are also welcome to participate ...

  6. Java Open source blog ——B3log Solo 0.6.7 The official version is published !

    Java Open source blog -- B3log Solo 0.6.7 The official version is published ! Welcome to download . in addition , Welcome to see B3log New projects for the team :Wide, You are also welcome to participate :-) characteristic Label based article classification P ...

  7. Java Open source blog ——B3log Solo 0.6.1 The official version has been released !

    Java Open source blog —— B3LOG Solo 0.6.1 The official version has been released ! Welcome to download . The main purpose of this version is to improve the experience of details , And added a Metro Style skin . characteristic Label based article classification Ping Goog ...

  8. Java Open source blog Solo 1.8.0 Release - Improve file upload

    This release mainly updates the editor , Make it better support file upload .(1.8.0 Please see the version change record here ) our Markdown Editor : in addition , We are right. HTTPS Our support is also more perfect , Welcome to try ! brief introduction Solo ...

  9. Java Open source blog My-Blog And mysql The container is reinitialized seriously bug Repair process

    Let me write it out front <Docker+SpringBoot+Mybatis+thymeleaf Of Java Blog system is open source > <Java Open source blog My-Blog And docker Container componentization modification > ...

  10. Java Open source blog —— Solo 0.6.8 The official version has been released !

    Java Open source blog -- Solo 0.6.8 The official version has been released , Welcome to download . in addition , Welcome to another of our products , On-line Golang IDE--Wide! characteristic Label based article classification Blog / label Atom/R ...

Random recommendation

  1. compile android 4.4.2

    1. obtain Android Source code (1) download repo Create a bin Folder to store repo, And set the path to the environment variable mkdir ~/bin PATH=~/bin:$PATH download repo Script ...

  2. C++ Virtual functions , Some problems of pure virtual functions

    #include <iostream> using namespace std; #define cendl cout << endl; class AA{// This is a pure virtual function ...

  3. iOS xib in TableView Created 2 Patterns

    stay xcode 5.0 in use xib edit tableview Yes 2 Patterns , See the picture below among ,dynamic prototype Dynamic prototype Express tableview Will ask what it specifies data source get data , If ...

  4. H5 note ——locaStorage and sessionStorage Some pits of local storage

    When using window.localStorage perhaps window.sessionStorage Storage json Data processing requires that json The data used JSON.stringify(data) convert to json The string is stored in this ...

  5. Use hwclock Sync RTC( Hardware clock ) and OS Clock( Operating system clock )

    Linux Here's a command called hwclock, Its main function is to RTC Clock synchronization with the operating system . You can put RTC The clock is synchronized to the operating system , You can also go through hwclock Change the current system time .Internet Time . Local ...

  6. MyEclipse Reverse generation of entity classes from database tables Hibernate The way ( Reverse Engineering )

    One . open Myeclipse Database Explorer Two . newly build [New..] 3、 ... and . Select database , Add driver Four . Test connection 5、 ... and . Select the table in the database and right-click to select [Hibernate Rever..] ...

  7. tencent QQAndroid API Call the instance (QQ No need to log in to share )

    tencent QQAndroid API Call the instance (QQ No need to log in to share )   There are two main steps : To configure Androidmanifest.xml modify activity Inside the code The specific changes are as follows :   1.Activity generation ...

  8. WORD It can be edited left and right after column division

    The operation is as follows : If it is office Please refer to :https://zhidao.baidu.com/question/403577041.html If it is WPS:1. Click Insert , There is a pagination , After clicking, there is an optional ...

  9. In depth understanding of koa Medium co Source code

    Read the directory One : understand Generator Two : understand js The function is coriolized 3、 ... and : understand Thunk function Four : understand CO Source code Back to the top One : understand Generator Looking at co Before source code , Let's first understand Generator function .G ...

  10. Redis and Memcached contrast 【 turn 】

    Redis and Memcached contrast These two years Redis It's so hot ,Redis It's often used as Memcached Our challengers are brought to the table . About Redis And Memcached The comparison is everywhere . However ,Redis ...