Vue3项目从零开始建造项目及插件的使用

npm i postcss postcss-loader autoprefixer&＃64;9.8.6 -D

autoprefixer使用9.8.6版本主要是与postcss的兼容性问题&＃xff0c;autoprefixer使用最新版本。

2.2、在vue3-demo项目下创建postcss.config.js文件&＃xff1b;

//创建 postcss.config.jstouch postcss.config.js
// postcss.config.jsmodule.exports &＃61; { plugins: [ // 配置 Autoprefixer 插件 require(&＃39;autoprefixer&＃39;)({ // 游览器最近的两个版本 &＃39;overrideBrowserslist&＃39;: [&＃39;last 2 versions&＃39;] }) ],};


2.3、在App.vue中输入以下代码&＃xff0c;重新运行&＃xff1a;

通过游览器查看输出&＃xff1a;

div { display: -webkit-box; display: -ms-flexbox; display: flex;}


3、配置Css初步语言-Sass

3.1、使用下面的命令安装

npm install sass sass-loader -D


3.2、安装好了sass&＃xff0c;那我们就在App.vue中使用Sass&＃xff1b;

这里我们可以在页面上&＃xff0c;文字已经是红色了。

4、配置UI组件库

4.1、使用以下命令按装UI组件ant-design-vue &＃64; next&＃xff0c;ant-design-vue组件已经支持Vue3;

npm i ant-design-vue&＃64;next -D


4.2、在main.js中&＃xff0c;加上日期ant-design-vue组件库

// main.jsimport { createApp } from &＃39;vue&＃39;import App from &＃39;./App.vue&＃39;import Antd from &＃39;ant-design-vue&＃39;import &＃39;ant-design-vue/dist/antd.css&＃39;
const app &＃61; createApp(App)app.use(Antd)app.mount(&＃39;#app&＃39;)


4.3、在App.vue中约会ant-design-vue组件&＃xff1b;

5、配置路由vue-router

5.1、下载安装vue-router

npm install vue-router&＃64;4


5.2、安装成功后&＃xff0c;在src中创建views文件夹&＃xff0c;并创建home.vue&＃96;user.vue&＃96;两个文件&＃xff1b;
home.vue文件

user.vue文件

5.3、在src中创建router文件夹&＃xff0c;并创建index.js文件

import { createRouter, createWebHashHistory} from &＃39;vue-router&＃39;
const Home &＃61; ()&＃61;> import(&＃39;./../views/home.vue&＃39;)const User &＃61; ()&＃61;> import(&＃39;./../views/user.vue&＃39;)
const routes &＃61; [{ path: &＃39;/home&＃39;, name: &＃39;home&＃39;, component: Home }, { path: &＃39;/user&＃39;, name: &＃39;user&＃39;, component: User }, { path: &＃39;/&＃39;, redirect: &＃39;/home&＃39;, component: Home }]export default createRouter({ history: createWebHashHistory(), routes});


5.4、在main.js中引用vue-router;

//main.jsimport router from &＃39;./router/index.js&＃39;...app.use(router)


5.5、在App.vue中第5中添加方法menuClick&＃xff1b;

实现路由转发&＃xff0c;在方法中添加方法menuClick

methods: { menuClick(e) { // 路由跳转 this.$router.push(e.key) }}


等页面更新&＃xff0c;我们点击用户&＃xff0c;hone菜单就可以看到效果了。

6、配置状态管理器Vuex

6.1、安装vuex;

npm install vuex&＃64;next -D


6.2、在src中创建存储文件夹&＃xff0c;并创建index.js文件&＃xff1b;
并且在状态里面放置一个计数值&＃xff1b;
在变异里面创建一个操作增量&＃xff0c;每次加1&＃xff1b;

import { createStore} from &＃39;vuex&＃39;
export default createStore({ // 存放状态 state:{ count: 0 }, mutations: { // 操作 increment(state) { state.count&＃43;&＃43; } }, actions: {}, modules: {}})


6.3、在main.js中发布vuex;

import store from &＃39;./store/index.js&＃39;...app.use(store)


6.4、在home.vue中添加一个按钮&＃xff0c;并使用count这个值&＃xff1b;通过按钮更新Vuex的值。

总结

今日文章的Vue3的项目组装就到这里了&＃xff0c;现在暂时还有很多插件无法使用&＃xff0c;后续慢慢就会更新&＃xff0c;越来越多的插件将会支持Vue3。

本文完〜