zoukankan      html  css  js  c++  java
  • vue-cli 3.0 学习笔记


    -------------------------------------------

    项目搭建及结构

    安装

    npm install -g @vue/cli

    添加项目

    vue create my-project


    启动:npm run server

    打包:npm run build

    -------------------------------------------

    Vue-Cli3.0-自定义脚手架模板

    -------------------------------------------

    Vue-Cli3.0-新出的添加插件方法

    npm install axios
    vue add vuetify

    两个都可以 后面那个会影响展示
    -------------------------------------------


    Vue-Cli3.0-全局环境变量的使用

    更目录加:.env

    内容:env_VUE_APP_url=http://api.dev.com

    env_VUE_APP 这段是固定的

    获取

    data(){
    return{
    url:process.env.VUE_app__url
    }
    }


    调用:{{url}}}


    .env.development 开发环境

    .env.prodoction 生产环境


    -------------------------------------------

    Vue-Cli3.0-独立运行.vue文件

    vue serve 项目名字/demo.vue

    可能会提示报错,安装个东西就好了,报错会提示


    -------------------------------------------

    项目根目录:vue ui

    可以在网页操作图形化添加和启动项目


    -------------------------------------------


    Vue-Cli3.0-配置基础的路径


    vue.config.js

    module.exports = {
    baseUrl:"/",//根目录
    outputDir:"dist",//构建输入目录
    assetssDir:"assets",//静态资源目录(js,css,img,fonts)
    lintOnSave:false,//是否开启eslint保存检测
    }

    -------------------------------------------

    Vue-Cli3.0-配置跨域请求


    module.exports = {
    baseUrl:"/",//根目录
    outputDir:"dist",//构建输入目录
    assetssDir:"assets",//静态资源目录(js,css,img,fonts)
    lintOnSave:false,//是否开启eslint保存检测
    devServer:{
    open:false,//自动弹出页面
    host:"127.0.0.1",//0.0.0.0
    port:8081,//端口号
    https:false,
    hosOnly:false,//热更新
    proxy:{
    //配置跨域
    ‘api’:{
    target:'http///localhost:5000/api',
    ws:true,
    changOrigin:true,
    pathRewrite:{
    '^/api':''
    }
    }
    }
    }
    };


    -------------------------------------------

    Vue-Cli3.0-加载美团外卖数据json

    const goods = require('./data/goods.json');
    const ratings = require('./data/ratings.json');
    const seller = require('./data/seller.json');

    module.exports = {
    baseUrl: '/', // 根路径
    outputDir: 'dist2', // 构建输出目录
    assetsDir: 'assets', // 静态资源目录(js,css,img,fonts)
    lintOnSave: false, // 是否开启eslint保存检测, 有效值: true || false || 'error'
    devServer: {
    open: true,
    host: 'localhost',
    port: 8081,
    https: false,
    hotOnly: false,
    proxy: {
    // 配置跨域
    '/api': {
    target: 'http//localhost:5000/api/',
    ws: true,
    changOrigin: true,
    pathRewrite: {
    '^/api': ''
    }
    }
    },
    before(app) {
    // http://localhost:8081/api/goods
    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);
    });
    }
    }
    };

  • 相关阅读:
    【Leetcode】23. Merge k Sorted Lists
    【Leetcode】109. Convert Sorted List to Binary Search Tree
    【Leetcode】142.Linked List Cycle II
    【Leetcode】143. Reorder List
    【Leetcode】147. Insertion Sort List
    【Leetcode】86. Partition List
    jenkins 配置安全邮件
    python 发送安全邮件
    phpstorm 同步远程服务器代码
    phpUnit 断言
  • 原文地址:https://www.cnblogs.com/shaozhu520/p/9783381.html
Copyright © 2011-2022 走看看