Vue-CLI

# 安装

注意

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本

# 全局安装@vue/cli  
npm install -g @vue/cli  
# 查看是否安装成功
vue -V  or  vue --version
# 创建项目
vue create hello

1
2
3
4
5
6

# 目录结构

.
├── node_modules      // 依赖包
├── public
│   ├── favicon.ico   // 图标
│   └── index.html    // 主页面
├── src
│   ├── assets        // 存放静态资源
│   │   └── logo.png  // logo图片
│   ├── components    // 存放组件
│   ├── App.vue       
│   └── main.js       // 入口文件
├── .gitignore        // git版本忽略的配置
├── babel.config.js   // babel的配置文件
├── jsconfig.json   
├── package-lock.json // 包管理控制文件
├── package.json      // 应用包配置文件
├── README.md         // 应用描述文件
└── vue.config.js     // 项目配置文件
// vue inspect > output.js命令可以看到Vue脚手架的默认配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 组件

组件传值

组件接受外部传过来的数据

传递数据

<HelloWord name="xxx"></HelloWord>

接收数据

注意

尽量不要修改props中传递过来的参数，可将参数赋值一份到data中进行修改

// 1.只接收
props:['name','age']
// 2.限制类型
props:{
    name:String
}
// 3.限制类型，指定默认值，吸纳值必要性
props:{
    type:String,
    required:true,
    default:'xxx'
}

1
2
3
4
5
6
7
8
9
10
11
12

# mixin

可以把多个组件共用的配置提取成一个混入对象

定义混入对象

export const mixin = {
    data(){},
    methods:{},
    mounted(){}
}

1
2
3
4
5

混入mixin

// 局部混入
import {mixin} from '@/utils/mixin'
export default {
    mixins:[mixin]
}
// 全局混入  main.js中
import Vue from 'vue'
import {mixin} from '@/utils/mixin'
Vue.mixin(mixin)

1
2
3
4
5
6
7
8
9

# 插件

提供更便捷，增强Vue，包含一个install方法

定义插件

export default = {
    // 第二个参数是插件使用者传递的参数
    install(Vue,options){
        Vue.filter('strSlice',function(val){
            return val.slice(0,4)
        })
        Vue.prototype.hello = () => {alert('xx')}
    }
}

1
2
3
4
5
6
7
8
9

使用插件

import Vue from 'vue'
import plugin from '@/utils/pulgin'
Vue.use(plugin)

1
2
3

# 代理

出现跨域问题时，在开发环境下将 API 请求代理到 API 服务器

devServer:{
    port: 8080, // 端口号
    proxy: {
      '/api': {
        target: 'http://localhost:3030',  // 指向的实际地址
        ws: true,   //如果要代理 websockets，配置这个参数
        secure: false,  // 如果是https接口，需要配置这个参数
        // 允许跨域 用于控制请求头中的host值
        /**
         * 当前服务为8080端口时 服务器为5000端口
         * true  服务器收到的host为5000
         * false 服务器收到的host为8080
        */
        changeOrigin: true,  
        pathRewrite:{
            // 原请求地址为 /api/getData 将'/api'替换''
            // http://xxx.xxx.xxx/api/getData是无法访问的，需要进行重写路径
            // 代理后的请求地址为： http://xxx.xxx.xxx/getData
          '^/api':''
        }
      },
      '/foo': {
        target: 'http://localhost:8888',
        pathRewrite:{
          '^/foo':''
        }
      }
    },
    // 单独的写法
    proxy:'http://localhost:3030'
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

页面中调用即可

axios.get('/api/student').then()
// 单独的
axios.get('/student').then()

1
2
3

# 常见问题

# 使用less全局变量函数无效

安装

npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev

vue.config.js配置

const path = require('path')
module.exports = defineConfig({
  pluginOptions:{
    "style-resources-loader":{
      preProcessor: "less",
      patterns: [
        path.resolve(__dirname,'./src/common/styles/config.less')
      ]
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11

上次更新: 2024/10/09, 16:59:47

← Vue-Router Vue3→