前端学习--vue2--1-基础配置

chatgpt/2023/9/26 13:14:03
写在前面:
好久没写了,做实习每天上班都没啥时间写,1个半月前开始系统学习前端,然后做了半个月主要的前端实习了wk。也行,当复习了,后端也还是搞了点。
本文介绍vue2的一些基础和配置,配置只写我现在用过的,以后有在补充。
前置知识
  • html
  • javascript
  • css
  • 文章目录

    • 安装
    • 项目结构
    • vue.config.js
      • devServer
        • 端口设置
        • 代理设置
        • 其他可能配置项
      • lintOnSave
      • publicPath
      • 其他配置
    • vue组件
      • main/APP组件
    • vuejs devtool的使用

    vue的理解,vue就是一套构建页面的框架,简化原生js的书写,如动态绑定等
    vue的创建类似于,将一个vue对象挂载到一个组件上,然后对组件进行渲染。

    安装

    需要有前端环境nodejs和npm,建议直接安装nvm,类似java的maven

    安装脚手架

    npm install -g @vue/cli
    

    安装浏览器插件vue调试插件
    在这里插入图片描述

    创建vue项目
    以图形化界面创建

    vue ui
    

    在这里插入图片描述

    在这里插入图片描述
    现在学的是vue2就可以选择第二个,这里介绍用

    在这里插入图片描述
    等待初始化
    在这里插入图片描述
    不过还是建议手动创建将vuex和router勾选上
    在这里插入图片描述

    运行项目

    npm run serve
    

    如果不知道后面名字可以就打一个npm run会提示的
    在这里插入图片描述
    每次敲写比较麻烦启动,我们可以配置一个启动
    在webstrom中编辑配置
    在这里插入图片描述
    新建一个npm
    在这里插入图片描述
    选择配置就可以了
    在这里插入图片描述

    点击运行就可以运行了
    在这里插入图片描述

    项目结构

    在这里插入图片描述

    vue.config.js

    vue.config.js(相当于之前的webpack.config.js) 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件

    devServer

    端口设置

    在port配置端口,如果想自动寻找可以写’auto’
    在这里插入图片描述

    代理设置

    设置/api开头的代理到localhost:8080

    devServer: {port: 80,proxy: {'/api': {target: 'http://localhost:8080'}}},
    

    如果只是代理则可以省写为

    proxy: {'/api':'http://locahost:8080'
    }
    

    如果不想请求以api开头,则需要重写请求,将所有/api开头的替换成空

        proxy: {'/api': {target: 'http://localhost:8080',pathRewrite: {'^/api':''},}}
    

    其他可能配置项

    这里是更多的
    changeOrigin,修改的只是host的值和反向代理没有关系。

        proxy: {'/api': {target: 'http://localhost:8080',secure: true,// 如果是https接口,需要配置这个参数changeOrigin: false,// 改变host,false则是不改变,true则会改变host为target前缀// 如果我设置false,那么在F12看到的host是我前端的ip和端口,如果true则是targetpathRewrite: {'^/api':''},}}
    

    lintOnSave

    这个东西很烦人,一点点es错误都会弹出来,建议设置成false

    publicPath

    部署打包时的基本url
    如我想部署到ip的/demo1中,不加publicPath,是不能通过ip/demo1/资源的
    如果将publicPath设置为’/demo1/',那么所有的请求都会加上这个/demo1/
    这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径,也可以用在类似 Cordova hybrid 应用的文件系统中。

    这个值在开发环境下同样生效。如果你想把开发服务器架设在根路径,你可以使用一个条件式的值:

    module.exports = {publicPath: process.env.NODE_ENV === 'production'? '/production-sub-path/': '/'
    }
    

    其他配置

      devServer: {publicPath: '/demo/',outputDir: 'dist',// 当运行 vue-cli-service build 时生成的生产环境构建文件的目录.一般默认是distassetsDir: '', //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。indexPath: 'index.html',// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。lintOnSave: false, // 关闭严格模式port: 80, // 端口open: true, // 是否打开网页proxy: { //反向代理'/api': {target: 'http://localhost:8080',secure: true,// 如果是https接口,需要配置这个参数changeOrigin: false,// 改变发送源,false则是不改变,true则会改变为target前缀// 如果我设置false,那么在F12中的网络看到的就是80发出的pathRewrite: {'^/api':''},}}},
    

    vue组件

    Vue 的组件文件以 .vue 结尾,每个组件由三部分组成

    <template></template><script>
    export default {name: "demo"
    }
    </script><style scoped></style>
    
    • template 模板部分,由它生成 html 代码
    • script 代码部分,控制模板的数据来源和行为
    • style 样式部分

    main/APP组件

    在src目录下有一个App.vue和一个main.js这是vue项目的入口
    在app.vue中定义了一个id为app的div,而在main.js中将vue对象挂载到了这个app的组件上。
    还需要注意的是所有的页面都只是在这App.vue一个页面中展示的,用路由的方式将其他页面作为App.vue组件的一部分进行展示,切换页面也只是切换App.vue中的子组件。
    在这里插入图片描述
    在这里插入图片描述

    这里的大致流程就是export default 导出组件对象,供 main.js 导入使用,render来进行解析,然后mout挂载到id为app的html页面上
    在这里插入图片描述

    vuejs devtool的使用

    在安装部分,介绍过一款浏览器插件.
    安装过后打开F12可以发现多了一个vue
    在这里插入图片描述
    模块是这样的
    components是组件,可以查看vue的组件,点击后在其右边可以查看其属性,还能对其进行修改。

    在这里插入图片描述
    vuex
    这个后面用的到,是一个全局变量的使用。
    在这里插入图片描述
    routers
    路由,通过路由来代表每一个组件,看看让谁来展示
    在这里插入图片描述
    timeline
    安装时间和事件顺序来展示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.exyb.cn/news/show-5313811.html

如若内容造成侵权/违法违规/事实不符,请联系郑州代理记账网进行投诉反馈,一经查实,立即删除!

相关文章

Java API指南:掌握常用工具类与字符串操作

文章目录 1. API简介2. Java API的使用2.1 创建和使用Java API工具类2.2 使用String类进行字符串操作 结语 导语&#xff1a; Java作为一门功能强大的编程语言&#xff0c;其成功之处不仅在于语法结构的简洁明了&#xff0c;更因为其丰富的API&#xff08;Application Programm…

Day07-作业(MySQL查询设计)

作业1: 根据如下需求完成SQL语句的编写 【仔细阅读题目需求呦】 数据准备&#xff1a; 创建一个数据库 db02_homework 执行如下SQL语句&#xff0c;准备测试数据 -- 员工管理(带约束) create table tb_emp (id int unsigned primary key auto_increment comment ID,usernam…

打卡力扣题目十一

#左耳听风 ARST 打卡活动重启# 目录 一、问题 二、解题方法一 三、解题方法二 四、区别 关于 ARTS 的释义 —— 每周完成一个 ARTS&#xff1a; ● Algorithm: 每周至少做一个 LeetCode 的算法题 ● Review: 阅读并点评至少一篇英文技术文章 ● Tips: 学习至少一个技术技巧 ●…

SciencePub学术 | 人工智能类重点SCIEEI征稿中

SciencePub学术 刊源推荐: 人工智能类重点SCIE&EI征稿中&#xff01;信息如下&#xff0c;录满为止&#xff1a; 一、期刊概况&#xff1a; 人工智能类重点SCIE&EI 【期刊简介】IF&#xff1a;6.5-7.0&#xff0c;JCR1区&#xff0c;中科院2区&#xff1b; 【出版社…

Nyan Progress Bar 更换进度条插件

打开idea 每天面对进度条怪无聊的&#xff0c;今天无意之中发现一个插件还挺有意思的 Nyan Progress Bar 当然啦&#xff0c;根据自己的喜欢进行选择 安装好之后&#xff0c;然后再打开idea

swagger前端传值

Parameter Type传值方法path直接在路径中传值bodydata传值queryparams传值 原生axios使用例子&#xff1a; this.$axios({url:/list/${id}, // path参数method:post,data: [123], // body参数params:{ type: 1 } // query参数 }).then(res> {console.log(res) })

DPN(Dual Path Network)网络结构详解

论文&#xff1a;Dual Path Networks 论文链接&#xff1a;https://arxiv.org/abs/1707.01629 代码&#xff1a;https://github.com/cypw/DPNs MXNet框架下可训练模型的DPN代码&#xff1a;https://github.com/miraclewkf/DPN 我们知道ResNet&#xff0c;ResNeXt&#xff0c;D…

数组的使用(逆序、冒泡)

内存连续数据类型相同从0开始索引 找出数组中的最大值 #include <iostream> #include <stdlib.h> //随机数所在文件 using namespace std;int main() {int arr[5]{104,134,145,129,89};//初始化没有填的为0 int max0;for(int i0;i<5;i){if(arr[i]>max){ma…
推荐文章