导读
vue3.0 进去有段时间，借助年底这段时间不怎忙，摸会鱼，开始学习Vue3。本文次要从我的项目搭建到我的项目实战，一步步的学习Vue3 的我的项目搭建以及一些插件及库的应用，缩小入坑。
浏览三连：点赞（????）、关注（????）、珍藏（????）。
本文 github(demo) 已上传，更多往期文章已分类整理。
注释
版本
node v12.16.2
npm 6.14.9
残缺的package.json
{ "name": "vue3-demo", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0", "vue-router": "^4.0.1" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "ant-design-vue": "^2.0.0-rc.5", "autoprefixer": "^9.8.6", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0-0", "postcss": "^8.2.1", "postcss-loader": "^4.1.0", "sass": "^1.30.0", "sass-loader": "^10.1.0", "vuex": "^4.0.0-rc.2" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ]}1. 初始化我的项目
1.1 应用Vue3，须要降级vue-cli，全局装置最先版本@vue/cli；
npm install -g @vue/cli@next1.2 装置胜利后输出,显示，装置胜利
$ vue -V@vue/cli 4.5.41.3 装置胜利Vue cli 4, 应用上面命令创立vue3我的项目；
vue create vue3-demo运行：在Manually select features 输出Vue 3抉择vue3版本；
? Please pick a preset: (Use arrow keys)> true ([Vue 2] dart-sass, babel, typescript, router, vuex, unit-mocha, e2e-cypress) Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) Manually select features Vue 31.4 启动服务
cd vue3-demo //进入文件npm run serve // 运行我的项目应用网络浏览器转到：http://localhost:8080/,如图
1.4 我的项目文件列表
├─.gitignore├─ .git├─ node_modules├─babel.config.js├─package-lock.json├─package.json├─README.md├─src| ├─App.vue| ├─main.js| ├─components| | └HelloWorld.vue| ├─assets| | └logo.png├─public| ├─favicon.ico| └index.html2. 配置PostCSS
PostCSS 插件转换 CSS 代码的工具,减少代码的可读性。利用从 Can I Use 网站获取的数据为 CSS 规定增加特定厂商的前缀。
Autoprefixer 主动获取浏览器的风行度和可能反对的属性，并依据这些数据帮你主动为 CSS 规定增加前缀。
2.1 装置 postcss、postcss-loader、autoprefixer插件；
npm i postcss postcss-loader autoprefixer@9.8.6 -Dautoprefixer应用9.8.6版本次要是与postcss的兼容性问题，autoprefixer默认应用最新版本。
2.2 在vue3-demo我的项目下创立postcss.config.js文件；
//创立 postcss.config.jstouch postcss.config.js// postcss.config.jsmodule.exports = { plugins: [ // 配置 Autoprefixer 插件 require('autoprefixer')({ // 游览器最近的两个版本 'overrideBrowserslist': ['last 2 versions'] }) ],};2.3 在App.vue 中输出上面代码，从新运行：
<template> <div>123</div></template><script>export default { name: 'App', components: { }}</script><style scoped> div { display: flex; }</style>通过游览器查看输入：
div { display: -webkit-box; display: -ms-flexbox; display: flex;}3. 配置Css 预处理语言 —— Sass
3.1 应用上面命令装置 Sass;
npm install sass sass-loader -D3.2 装置好了sass，那咱们就在App.vue中应用Sass；
<!-- App.vue --><template> <div>123</div></template><script>export default { name: 'App', components: { }}</script><style lang="scss" scoped> $color: #f00; div { display: flex; color: $color, }</style>这里咱们能够在页面上，文字曾经是红色了。
4. 配置UI组件库
4.1 应用上面命令按装UI组件ant-design-vue@next,ant-design-vue组件曾经反对 Vue3;
npm i ant-design-vue@next -D4.2 在main.js 中, 全局引入ant-design-vue组件库
// main.jsimport { createApp } from 'vue'import App from './App.vue'import Antd from 'ant-design-vue'import 'ant-design-vue/dist/antd.css'const app = createApp(App)app.use(Antd)app.mount('#app')4.3 在App.vue中引入ant-design-vue组件；
<template> <a-layout id="components-layout-demo-custom-trigger"> <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible> <div class="logo" /> <a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys"> <a-menu-item key="home"> <HomeOutlined /> <span>Home</span> </a-menu-item> <a-sub-menu key="sub1"> <template #title> <span> <user-outlined /> <span>User</span> </span> </template> <a-menu-item key="user"> Tom</a-menu-item> </a-sub-menu> </a-menu> </a-layout-sider> <a-layout> <a-layout-header style="background: #fff; padding: 0"> <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" /> <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" /> </a-layout-header> <a-layout-content class="main"> <router-view></router-view> </a-layout-content> </a-layout> </a-layout></template><script> import { UserOutlined, HomeOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'; export default { components: { UserOutlined, HomeOutlined, MenuUnfoldOutlined, MenuFoldOutlined }, data() { return { selectedKeys: ['home'], collapsed: false, }; }, methods: { } };</script><style lang="scss" scoped> #components-layout-demo-custom-trigger { height: 100vh; .trigger { font-size: 18px; line-height: 64px; padding: 0 24px; cursor: pointer; transition: color 0.3s; &:hover { color: #1890ff; } } .logo { height: 32px; background: rgba(255, 255, 255, 0.2); margin: 16px; } } .main { margin: 24px 16px; padding: 24px; background: #fff; height: calc(100% - 64px); }</style>5. 配置路由 vue-router
5.1 下载安装vue-router
npm install vue-router@4 5.2 装置胜利后，在src中创立views 文件夹，并且创立home.vue`user.vue`两个文件；home.vue文件
<template> Home</template>user.vue文件
<template> User</template>5.3 在src中创立router 文件夹，并且创立index.js文件
import { createRouter, createWebHashHistory} from 'vue-router'const Home = ()=> import('./../views/home.vue')const User = ()=> import('./../views/user.vue')const routes = [{ path: '/home', name: 'home', component: Home }, { path: '/user', name: 'user', component: User }, { path: '/', redirect: '/home', component: Home }]export default createRouter({ history: createWebHashHistory(), routes});5.4 在 main.js 中援用 vue-router;
//main.jsimport router from './router/index.js'...app.use(router)5.5 在App.vue 中第5中增加办法menuClick;<a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys" @click="menuClick">
实现路由跳转，在methods 中增加办法menuClick
methods: { menuClick(e) { // 路由跳转 this.$router.push(e.key) }}等页面更新，咱们点击user、hone菜单就能够看到成果了。
6. 配置状态管理器 Vuex
6.1 装置 vuex;
npm install vuex@next -D6.2 在src中创立store 文件夹，并且创立index.js文件;
并且在state 外面寄存一个 count值;
在mutations外面创立一个操作increment，每次加1；
import { createStore} from 'vuex'export default createStore({ // 寄存状态 state:{ count: 0 }, mutations: { // 操作 increment(state) { state.count++ } }, actions: { }, modules: { }})6.3 在 main.js 中引入 vuex;
import store from './store/index.js'...app.use(store)6.4 在home.vue中增加一个按钮，并应用count这个值；通过按钮更新Vuex的值。
<template> <div>应用count 这个状态{{this.$store.state.count}}</div> <a-button @click="add" type="primary">点击状态加一</a-button></template><script> export default { methods: { add() { this.$store.commit('increment') } } }</script>总结
这篇文章比拟根底，但依据以上的步骤，就能够把我的项目搭建起来。明天的Vue3的我的项目搭建就到这里了，当初临时还有很多插件不能应用，后续缓缓就会更新，越来越多的插件将会反对Vue3。
最初
如果喜爱或对你有用，那就点个赞呗（????????????）！ (╯╰)(╯╰)(╯╰)。
参考
Vue文档
postcss
autoprefixer