关于vue.js:Vue3-项目从零开始搭建项目及插件的使用

导读

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@next

1.2 装置胜利后输出, 显示，装置胜利

$ vue -V
@vue/cli 4.5.4

1.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-cypr
ess)
 Default ([Vue 2] babel, eslint)
 Default (Vue 3 Preview) ([Vue 3] babel, eslint)
 Manually select features Vue 3

1.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.html

2. 配置 PostCSS

PostCSS 插件转换 CSS 代码的工具, 减少代码的可读性。利用从 Can I Use 网站获取的数据为 CSS 规定增加特定厂商的前缀。

Autoprefixer 主动获取浏览器的风行度和可能反对的属性，并依据这些数据帮你主动为 CSS 规定增加前缀。

2.1 装置 postcss、postcss-loader、autoprefixer 插件；

npm i postcss postcss-loader autoprefixer@9.8.6 -D

autoprefixer应用 9.8.6 版本次要是与 postcss 的兼容性问题，autoprefixer默认应用最新版本。

2.2 在 vue3-demo 我的项目下创立 postcss.config.js 文件；

// 创立 postcss.config.js
touch postcss.config.js

// postcss.config.js
module.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 -D

3.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 -D

4.2 在 main.js 中, 全局引入ant-design-vue 组件库

// main.js
import {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.js
import 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 -D

6.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