Vue3項目從零開始建造項目及插件的使用

導讀

VUE 3.0出來有段時間，借助年底這段時間不怎忙，摸會魚，開始學習VUE 3.本文主要從項目搭建到項目實戰，一步步的學習Vue3的項目搭建以及一些插件及庫的使用，減少入坑。

版本

節點v12.16.2

npm 6.14.9

完整的包裝。js上

{
  "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

運作：在手動選擇功能輸入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.5、項目檔案清單

├─.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代碼的工具，增加代碼的可讀性。利用從我可以使用網站電子雜志的資料為CSS規則添加特定廠商的字首。

Autoprefixer自動擷取浏覽器的流行度和能夠支援的屬性，并根據這些資料幫你自動為CSS規則添加字首。

2.1、安裝postcss，postcss-loader，autoprefixer插件；

npm i postcss postcss-loader [email protected] -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、使用下面的指令安裝

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”>

實作路由轉發，在方法中添加方法menuClick

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

等頁面更新，我們點選使用者，hone菜單就可以看到效果了。

6、配置狀态管理器Vuex

6.1、安裝vuex;

npm install vuex@next -D

6.2、在src中建立存儲檔案夾，并建立index.js檔案；

并且在狀态裡面放置一個計數值；

在變異裡面建立一個操作增量，每次加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。

本文完〜

Vue3項目從零開始建造項目及插件的使用

導讀

版本

完整的包裝。js上

1、初始化項目

2、配置PostCSS

3、配置Css初步語言-Sass

4、配置UI元件庫

5、配置路由vue-router

6、配置狀态管理器Vuex

總結

繼續閱讀

UVA 10344- 23 out of 5

ZOJ 1104 Leaps Tall Buildings

ZOJ 3700 Ever Dream

HDU 2821 Pusher

ZOJ 1199 Point of Intersection

UVA 1401 Remember the Word

ZOJ 2748 Free Kick

CSU 1567 Reverse Rot

JAVA 系列——>開發工具IntelliJ IDEA的安裝以及配置、快捷鍵IDEA 簡介

UVA 519 Puzzle (II)

如何成為一名.net 工程師?

磁盤結構及在Linux中的命名

tabpanel 使用問題

CSS之折疊菜單

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”