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

导读

vue3.0 出来有段时间，借助年底这段时间不怎忙，摸会鱼，开始学习Vue3。本文主要从项目搭建到项目实战，一步步的学习Vue3 的项目搭建以及一些插件及库的使用，减少入坑。

版本

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。

链接: https://fly63.com/article/detial/9950