vue3.x学习笔记

前言

官网: vue3官网

vue3的安装

1
2
sudo npm install -g @vue/cli
# macOS
1
2
npm install -g @vue/cli
# windows

查看版本

1
vue -V

创建项目

1
vue create [项目名]  #OR `vue ui`

运行

1
npm run serve

安装插件

1
vue add axios

单独运行.vue文件

1
2
3
npm install --g @vue/cli-service-global
# 之后运行
vue serve xx.vue

vue.config.js配置

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
32
33
34
35
36
37
38
39
40
41
//模拟数据
const goods = require("./data/goods.json");
const ratings = require("./data/ratings.json");
const seller = require("./data/seller.json");
module.exports = {
    baseUrl: '/', //根路径
    outputDir: 'dist', //构建输出目录
    assetsDir: 'assets',//静态资源目录(js,css,img,fonts)
    lintOnSave: false,//是否开启eslint保存检测，有效值true||false||'error'
    devServer: {
        open: false,//是否启动之后自动弹出页面
        host: "localhost",//主机名字//127.0.0.0//0.0.0.0真机测试
        port: 8081,
        https: false,
        hotOnly: false,//热模块更新，webpack已经实现
        proxy: {
            //配置跨域
            '/api': {
                target: "http://localhost:5000/api/",
                ws: true,
                changePrigin: true,
                pathRewrite: {
                    '^/api': '1'
                }
            }
        },
        //调试接口，返回json数据
        before(app){
            //在服务内部所有中间件之前执行
            app.get("/api/goods",(req,res) => {
                res.json(goods);
            });
            app.get("/api/ratings",(req,res) => {
                res.json(ratings);
            });
            app.get("/api/seller",(req,res) => {
                res.json(seller);
            });
        }
    }
}