[从入门到入土(前端篇)]二,工具安装

最新推荐文章于 2023-08-25 16:50:35 发布

AWenc

最新推荐文章于 2023-08-25 16:50:35 发布

阅读量368

点赞数

分类专栏：从入门到入土(前端篇) 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_38420303/article/details/123377738

版权

从入门到入土(前端篇) 专栏收录该内容

6 篇文章 3 订阅

订阅专栏

[从入门到入土(前端篇)]二,工具安装

使用工具,加快开发效率

从前一篇的vite搭建的项目,和vue-cli搭建的项目相比,我们会发现,vite的文件结构非常的简单,同时也缺少了必要插件,所以我们需要自己手动安装.
整个项目中使用的插件:

vue-router 路由管理
vuex 状态管理
sass css预处理工具
axios 网络传输
element-plus ui框架
@kangc/v-md-editor 博客文章编辑展示插件
echarts 图表插件(用于后端统计信息展示)

整理文件目录

为了使整个项目文件分类更加有条理,方便后期项目开发和维护,我们先在项目下,新建几个目录和文件

node_modules 项目使用的插件存放位置
public 公共文件
src 存放代码的文件
api 接口访问文档
assets 静态资源目录
components 项目组件目录
router 路由控制
store 状态控制
utils 工具方法
views vue界面目录

开始安装

1.vue-router

npm install vue-router@next

等待安装完成后,怎么用在项目中呢

首先在router->index.js 文件中输入路由控制代码

/**
 * 路由控制
 */
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
    { path: '/',name: 'home',component: () => import(/* webpackChunkName: "about" */ '../views/home.vue') },
    { path: '/demo',name: 'demo',component: () => import(/* webpackChunkName: "about" */ '../views/demo.vue') },
]

const router = createRouter({
    history:createWebHistory(),
    routes
})

export default router

在main.js文件中中引入vue-router

import { createApp } from 'vue'
import App from './App.vue'

//路由控制
import router from './router'  //引入vue-router

const app = createApp(App);
app.use(router); //使用router
app.mount('#app')

// createApp(App).mount('#app')

修改app.vue界面

测试路由控制

在views 文件夹中新建home.vue 和demo.vue文件并且实现home点击跳转到demo界面

ok 到这里路由控制就完成啦

2.vuex

npm install vuex@next --save

store->index.js

import { createStore } from 'vuex'
const store = createStore({
    state: {
  
    },
    mutations: {
       
    },
    actions: {
        
    },
    getters: {

    }
})

export default store

main.js 中引入vuex

...
import store from './store/index' //引入vuex
app.use(store); //使用vuex
...

项目中使用到状态管理的地方不多所以具体用法大家可以自行百度这里不做演示

3.sass

vite 官网有对css 预处理的支持,本项目使用的是sass

vite-css预处理

npm install -D sass

等待安装完成就可以正常使用了

如何设置全局scss 公共样式库

首先在assets目录下新建:scss/style.scss 文件

随便先测试一下

<style.scss>

$demoColor:red;

修改vite.config.js文件(如果没有该文件,在项目目录下新建该文件)

// import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()],
  //添加全局scss样式
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/assets/scss/style.scss";' // 添加公共样式
      }
    }
  },

}

在home.vue中进行测试

<home.vue>

...
<div class="myStyle">HOME</div>
...
<style lang="scss">
    .home {
        .myStyle{
            color:$demoColor;
        }
    }
</style>
...

全局scss设置成功

4. element-plus

因为项目使用的是vue3 所以elementui 使用的是element-plus版本,使用方法与elementui是一样的

element-plus

安装依赖

npm install element-plus --save

main.js 引入element-plus

...
//引入elementUI
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { ElMessage } from 'element-plus'

app.use(ElementPlus); //使用elementUI

//挂载组件
app.config.globalProperties.$message = ElMessage;
...

因为常用element的message组件所以直接挂载在全局中使用

看看效果

demo.js中使用按钮并弹出提示框

<template>
    <div class="demo">
        <div>DEMO</div>
        <el-button type="primary" @click="toMessage">点击</el-button>
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        },
        mounted() {

        },
        methods: {
            toMessage(){
                this.$message.success("弹出提示框")
            }
        },
        components: {}
    }
</script>

<style lang="scss">

</style>