项目搭建

Toddler
116 阅读5分钟

创建项目

  1. vue-cli创建项目,采用webpack来构建项目，可选择vue版本,并会下载好依赖，主要用来创建vue2项目
vue create 项目名称

image.png

2.vite创建项目,直接下载项目文件,不会下载依赖，vue官方创建vue3项目的命令

npm init vue@latest

image.png 3. vite创建项目,一种新型前端构建工具

npm create vite

vue-router

因为我们在创建项目的时候有选择 vue-router 所以我们无需自己手动安装 router.vuejs.org/zh/

  1. 导入 vue-router
  2. 创建 路由规则
  3. 创建路由实例
  4. 导出路由实例
  5. 在main.js导入并挂载路由

全局状态(数据)管理

第一种：vuex

vuex.vuejs.org/zh/

  1. 在 src 中创建一个 store 的文件夹，然后在内部创建一个 index.js
  2. 导入 vuex 然后创建一个 store，再将 store 导出去
  3. 在 main.js 中导入并挂载 sotre

vue2写法
创建项目时可以选择，无需安装

vue3写法

npm install vuex@next --save

src/store/index.js文件

import { createStore } from "vuex";

// 定义全局状态的实例
const store = createStore({
    // 严格模式，在生产环境中不要打开
    strict: process.env.NODE_ENV !== 'production',
    state () {
        // 全局状态
        return {
            userInfo: {},
        }
    },
    // 唯一修改数据的方法
  mutations: {
    addUserInfo(state, user){
      for(const key in user){
        state.userInfo[key]=user[key]
      }
    },
    clearUserInfo(state){
      state.userInfo={}
    }
  },
    // 异步修改数据的地方
    actions: {
      
    },
    // 是 vuex 中的计算属性
    getters: {

    },
    // 状态模块
    modules: {

    }
})
// 导出创建好的实例
export default store

main.js文件

import store from "./store";
app.use(store)

第二种Pinia

vue2写法
vue2可以使用Pinia，但基本上都是使用vuex

vue3写法
创建项目时可以选择，无需安装

axios

axios-http.com/zh/

封装 axios

  1. 配置 baseURL
  2. 请求拦截器，就是在请求之前你还需要做什么配置
  3. 响应拦截器，就是服务器给出响应后，返回到前端前我们需要做什么操作， res.data
  4. 就是封装各种请求的方法如 get,post,put...

src/utils/request.js文件

// src/utils/request.js
import axios from 'axios'

// 创建一个 axios 实例
const request = axios.create({
    baseURL: 'http://121.89.205.189:3000/admin',
    timeout: 60000
})

// 添加请求拦截器
request.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么

    // 每次请求都会执行
    // 在发送请求前我们可以将公用的属性设置上
    // 比如可以在这里配置对应的 token

    // 1. 先获取 token
    const token = localStorage.getItem('token') || ''
    // 2. 设置token
    config.headers.token = token
    // console.log(config);

    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
request.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么

    console.log('1111111', response.data.code, window);
    if (response.data.code == '10119') {

        // 因为需要重新登录所以这里我们要清除掉原有数据
        localStorage.clear()


        // "token无效"
        window.location.href = '/#/login'
    }


    // 判断用户的登录状态
    // 因为服务器响应的时候有两个 data,所以我这里 return response.data;
    // 让页面中需要一次 .data 即可
    return response.data;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});

// 自定义各种数据请求的 axios
export default function ajax (config) {
    // 数据请求的时候我们需要什么参数
    // 1. 先获取到请求的一些必要参数
    const { url = '', method = 'GET', data = {}, headers = {} } = config

    // 2. 判断我们请求的类型 get  GET  GeT 
    switch (method.toUpperCase()) {
        case 'GET':
            // get 请求规定配置参数时需要加一个 { params: 我们的参数 }
            return request.get(url, { params: data })
        case 'POST':
            // 1. 表单提交数据
            if (headers['content-type'] == 'application/x-www-form-url-encoded') {
                // 转换参数类型，格式化数据
                const obj = new URLSearchParams()
                for (const key in data) {
                    obj.append(key, data[key])
                }
                return request.post(url, obj, { headers })
            }

            // 2. 文件数据
            if (headers['content-type'] == 'multipart/form-data') {
                // 处理文件的对象
                const obj = new FormData()
                for (const key in data) {
                    obj.append(key, data[key])
                }
                return request.post(url, obj, { headers })
            }


            // 3. json 数据提交
            return request.post(url, data)

        case 'PUT':
            // 修改数据 --- 数据的更新

            return request.put(url, data)

        case 'DELETE':
            // 删除数据
            return request.delete(url, { data })

        case 'PATCH':
            // 更新局部资源
            return request.patch(url, data)
        default:
            // 如果前面全部都不是
            return request.request(config)
    }
}

PC端 UI 组件库

element.eleme.cn/#/zh-CN

vue2

cnpm i element-ui -S

element-UI没有自动导入，所以一般使用完整引入，主要看公司

在main.js文件中添加

import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

vue3

cnpm install element-plus --save

配置自动导入

cnpm install -D unplugin-vue-components unplugin-auto-import

vite.config.js文件

import { fileURLToPath, URL } from 'node:url'

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

// ++++++++++
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // ... +++++++++
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

在element-puls中 icon 组件需要自己安装才能使用

npm install @element-plus/icons-vue

使用步骤

  1. 导入对应需要使用的 icon
  2. 注册该 icon 组件
  3. 使用 icon
import { Fold, Expand } from "@element-plus/icons-vue";
components: {
    Fold,
    Expand
  }
<el-icon size="30">
    <Fold />
</el-icon>

移动端 UI 组件库

vant-contrib.gitee.io/vant/#/zh-C…

vue2

cnpm i vant@latest-v2 -S

vue3

cnpm i vant -S

vue2和vue3都可以自动按需引入组件

  1. 安装插件
npm i unplugin-vue-components -D
  1. 配置插件（参照文档）
  2. 使用插件

格式化样式

因为我们开发项目阶段会使用到各种标签，有些标签会有一些自带的样式属性，我们可以通过格式化样式的方式将一些常见的不需要的样式去掉

npm install --save normalize.css

安装完成后在 main.js 中导入即可

import 'normalize.css/normalize.css'

预编译 CSS

因为在开发中写 css 有些时候不够便利，所以我们在开发中可以使用 less 或者 sass 来进行开发

cnpm i sass

只需要安装不需要做其他多余的配置,在写样式的时候需要在 style 标签中添加一个 lang="scss"

<!-- scoped 该属性是用来标记当前样式只能在当前组件中使用 -->
<!-- 其存在的目的是为了防止样式冲突 -->
<style lang="scss" scoped> 
</style>

MD5加密

md5 是一个加密函数，我们可以将要加密的字符串传递进去，会返回一个加密好的字符串，看公司是否需要对用户输入的密码进行加密，一般是不需要的 www.npmjs.com/package/md5

npm i md5

import md5 from "md5";
console.log(md5('学习123前端456'));

echarts

echarts.apache.org/zh/index.ht…

npm install echarts --save

使用步骤

  1. 导入图表
  2. 将图表绑定在指定元素上
  3. 设置一个 option
<script>
import * as echarts from 'echarts';

export default {
    data () {
        return {
            myChart: null
        }
    },
    methods: {
        changeType (type, x, y) {
            this.myChart.setOption({
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    data: x || ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: type || 'pie',
                        data: y || [5, 20, 36, 10, 10, 20]
                    }
                ]
            });
        }
    },
    mounted () {

        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById('main'));
        // 绘制图表
        this.changeType('pie')
    }
}

</script>
<template>
    <div>
        <el-button @click="changeType('line')">折线图</el-button>
        <el-button type="primary" @click="changeType('bar')">柱状图</el-button>
        <el-button type="success" @click="changeType('pie')">饼图</el-button>
        <el-button type="info" @click="changeType('scatter')">散点图</el-button>

        <el-button type="warning"
            @click="changeType('line', ['冰箱', '彩电', '洗衣机', '空调', 'VCD', 'DVD'], ['1000', '150', '5888', '3500', '50', '550'])">电器销量</el-button>
        <el-button type="danger"
            @click="changeType('', ['草莓', '榴莲', '柠檬', '橙子', '苹果', '圣女果'], ['100', '80', '200', '500', '99', '666'])">水果销量</el-button>
    </div>
    <div id="main"></div>
</template>

<style lang="scss" scoped>
#main {
    height: 600px;
    background-color: white;
}
</style>

如果一个页面需要使用多个图标的话，可以将单个图标做成组件放在components文件夹中，然后引入到页面中

avatar
文章
阅读
粉丝