跳至主要內容

配置

Emilia Zhen大约 5 分钟vue

webpack

样式处理

style-loader 、css-loader、less-loader 、 scss-loader

  1. 安装 、
npm i style-loader css-loader -D
      less-loader scss-loader
  1. 在webpack.config.js中的 module 节点设置解析规则
module: {
//所有webpack不能识别的文件的解析规则都在rules里面定义
     rules: [
        {
            //匹配需要处理的文件
           test: /\.css$/,
           //加载器在读取执行时是从右往左，css-loader帮助处理后缀为.css的文件，style-loader帮助将css文件中的样式插入到浏览器中
           use: ['style-loder', 'css-loder']
         }, {
           test: /\.(png|jpg|gif)$/,
            //limit单位是字节，如果被打包的图片大小大于等于limit的值url-loader在打包的时候会直接复制这张图片然后将图片地址放到src属性中，若小于则url-loader会将图片转换成base64字符串，然后将base64字符串放在src属性中。目的：优化减少项目中不必要的网络请求，小图片最好是转化成base64直接存放到build.js中
            use: 'url-loader?limit=5000'
          }, {
              test: /\.(eot|svg|ttf|woff)$/,
               use: [{ loader: 'url-loader', options: { limit: 5000byte } }]
         }, {
               test:/\.js$/,
                include:[path.resolve(__dirname,'src')],
                use:'babel-loader'
          }, {
                test: /\.vue$/,
                  use: 'vue-loader'
         }
      ]
}

url-loader

处理图片、字体图标、音视频等资源文件

npm i file-loader url-loader -D

babel

解析webpack默认不能处理的js

  1. 安装
npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-stage-0 -D
# state-0/state-1/state-2/state-3是对env字典的补充
  1. 在webpack.config.js中的moudle节点中配置
  2. 在项目根目录新建.babelrc文件，写入配置
{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime"]
}

webpack 中使用 Vue

  1. 安装
npm i vue  -S
npm i vue-loader vue-template-compiler -D

2.在webpack.config.js中配置 3. 在index.html中加入一个需要Vue托管的区域、

<div id="app"></div>
  1. 新建App.vue组件，在.vue页面写入
<template>
  <h1>app !!!{{ name }}</h1>
</template>

<script>
export default {
  data() {
    return { name: 'app' }
  },
}
</script>

<style scoped>
h1 {
  color: red;
}
</style>
  1. 在main.js中导入vue的包，渲染app.vue组件
import Vue from 'vue'
import app from '../app.vue'
new Vue({
  el: '#app',
  render: (c) => c(app), //creatElement
})

html-webpack-plugin

可以根据指定的html模版文件生成一个html页面，并且在html页面中自动引入打包好的文件

  1. 安装
npm i html-webpack-plugin -D
  1. 在webpack.config.js中配置
var htmlWebpackPlugin= require('html-webpack-plugin');
  1. 在webpack.config.js中的plugin节点
plugins: [
  new htmlWebpackPlugin({
    filename: 'index.html', //指定以哪个文件为模版生成一个新的html文件
    template: 'template.html', //生成的文件名称，这个文件默认放在项目根目录
    title: 'AAA',
  }),
]

若在plugins中有title属性，来更改title,需要在template.html文件中更改title

<title><%= htmlWebpackPlugin.options.title %></title>

scoped

可以让样式具有作用域，当前组件的样式只会影响到当前组件，不会影响到其他任何组件，加了scoped之后，页面中所有元素都会自动加上一个随机的属性，所有的样式也都会变成属性选择器

vue-cli

  1. 安装
npm i vue-cli -g
  1. 初始化项目模版
vue-init webpack admin

Eslint(语法规范化插件)、e2e(测试框架)、test(单元测试框架) -> No 3. 进入项目安装所有依赖

npm install
  1. 运行
npm run dev

在config/index.js中可以更改端口号和自动打开浏览器等

element-ui

安装element-ui并导入到main.js中

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

插件

插件通常会为Vue添加全局功能。插件的范围没有限制，一般添加全局方法或者属性、添加全局资源：指令/过滤器/过渡等、通过全局mixin方法添加一些组件选项如vue-router、添加Vue实例方法、添加一个库提供自己的 API 同时提供上面提到的一个或多个功能如vue-routerVue.js的插件应当有一个公开方法install,第一个参数是Vue构造器，第二个参数是一个可选的选项对象

export default {
install: function (Vue) {
// 退出登录;
// parameters: {}
  Vue.prototype.API_SECURITY_LOGINOUT = (parameters) => {
   return fetch({
    url: '/wcf/quit',
    method: 'get',
    params: parameters
   })
 }
}
·····
Vue.use(xxx)

登录页面路由跳转

在 src 目录下创建 views 文件夹，并创建 login.vue 组件 在router文件夹下index.js中配置路由规则

const router = new Router({
  routes: [
    {
      path: '/login',
      component: Login,
    },
    {
      path: '/',
      component: Home,
      redirect: '/welcome',
      children: [
        {
          path: 'welcome',
          component: Welcome,
        },
      ],
    },
  ],
})
export default router

使用 axios 发送登录请求

安装

npm i axios -S

在src目录下新建api/index.js文件，封装登录请求

import axios from 'axios'
const baseURL = 'http://xxxxxxx'
axios.defaults.baseURL = baseURL
export const checkUser = (params) => axios.post('login', params).then((res) => res.data)
export const getUserList = (params) => axios.get('users', params).then((res) => res.data)

在 login.vue 中的登录按钮上绑定点击事件发送登录请求

import { checkUser } from "../api";
..
methods: {
  loginSubmit() {
    this.$refs.form.validate(valide => {
         if (valide) {
            checkUser(this.form).then(res => {
                if (res.meta.status === 200) {
                     console.log("登录成功");
                    localStorage.setItem("token", res.data.token);
                     this.$router.push("/");
                 } else {
                    this.$message({
                         type: "err",
                         message: res.meta.msg
                   });
                }
            });
        } else {
         console.log("校验未通过");
        }
    });
 }
}

qs

这个POST请求要求的数据格式是application/x-www-form-urlencoded使用qs.stringify()将数据转化成表单格式 需要安装 qs,然后导入 qs

import 'qs' from 'qs'
qs.stringify({
  content:this.msg.trim()
})

vue-cli 配置代理解决开发阶段跨域问题

在vue-cli config/index.js中

proxyTable:{
    '/api':{
        target:'http://xx.xx/api',
      changeOrigin:true,
       pathRewrite:{
           '^/api':''
       }
    }
}

样式深度作用选择器

/deep/ 当在父组件中去修改子组件中标签样式，可以使用深度作用选择器，在 css 中使用 .aaa >>> .bbb，在scss中使用 .aaa /deep/ .bbb

EmiliaZhen
Copyright © 2024 Emilia Zhen