首页 > 其他分享 >学习VUE第一天-环境的搭建

学习VUE第一天-环境的搭建

时间:2023-06-05 15:11:46浏览次数:39  
标签:VUE 第一天 vue 需要 ui 组件 搭建 路由 页面

1.创建 vue项目

流程:

1)

2)

 

3)

 

4)

 

5)

 

6)

 

7)

 

8)

 

9)

 

等待创建完毕后 cd 项目名称 进入项目内部

然后

2.启动项目  npm run serve

3.删除(不是必须)默认提供的 vue文件,记住,删除要把router.js中的路由清空掉,不然会报错

4.可以在vue.config.js中配置一下vue项目,比如更改端口,或者添加lintonsave:false,避免命名带来的小错误或者其他无关代码本身的小错误,刚改完,记得重启项目

5.查看ui图以及开发文档(接口文档)

6.可以提前先把准备工作做好,比如,下载各种所需要的额外依赖,如果axios,或者ui框架

7.全局引入我们需要的依赖,比如ui框架,比如axios

8.一般组件写在components中,页面写在views中,但是有些公司或者某些情况,两个文件夹内既有页面也有组件

9.查看ui图,然后对比框架,选择自己所需要的组件进行复制粘贴,更改参数

10.需要注意,当页面需要展现在浏览器视图中,一般有两种情况,1)组件嵌套组件2)路由展示,但是无论哪一种,都需要先创建路由(当父级组件嵌套子组件,只需要注册父级页面的路由)

11.async 搭配await以及直接使用this.$axios,两者你想使用哪一个就使用哪一个,两者本质上没有太大区别,两者目前来讲基本可以互换交替使用

 

11.注意,在写页面时,需要注意生命周期以及功能的调用,当功能需要页面一打开就执行,必然离不开生命周期的结合使用,当功能需要事件触发,一般都是点击等事件的触发操作

12.传参方式,一般情况下,只要是想从服务端获取数据,使用get请求,一般想做添加功能则是post,删除delete,修改put

13.页面在操作的时候,分清楚页面结构,上中下,template中则是视图层,写的内容是展示在页面中的数据,script标签中则是逻辑部分以及vue组件实例中各个属性的书写位置,底部style标签内则是样式,样式注意加scoped,避免影响其他页面

14.路由配置,一般,当我们打开页面,则需要某一个页面呈现在我们面前,则需要路由重定向,将页面直接进入新页面,则需要redirect去重定向页面地址,当我们有嵌套组件路由页面时,需要用到children属性(数组类型)

15.框架在使用的时候,复制粘贴问题

翻译

搜索

复制

标签:VUE,第一天,vue,需要,ui,组件,搭建,路由,页面
From: https://www.cnblogs.com/shianqi-123/p/17457794.html

相关文章

  • 【猫带你上云】搭建高度统一的开发环境
    在实际开发中,我有时候会碰到一些诡异的情况最终定位的原因,是因为开发环境不一致导致的结果所以,统一开发环境很有必要举个?栗子项目版本操作系统Windows-1064位*字符集UTF-8SDKJDK1.8数据库Mysql5.7(并统一编码问题)数据库modeSELECT@@sql_mode;数据库可视化工具SQLyog12......
  • Vue 跨域配置
    在package.json同级目录下新建文件vue.config.js;内容如下:module.exports={//自行复制黏贴devServer:{proxy:{'/api':{//以/api开头的地址会被替换成下面的targettarget:'http://191.196.21.1:8080/',//接口真实地址......
  • Vue项目中使用@路径
    第一步:安装一下pathnpminstallpath--save第二步:在vue.config.js文件中配置一下constpath=require("path");functionresolve(dir){returnpath.join(__dirname,dir);}module.exports={//跨域配置devServer:{proxy:{'/java&......
  • 搭建Scrapy基础框架
    官方教程:安装指南—Scrapy2.5.0文档第一步:下载并安装python3.9第二步:下载并安装Anaconda下载地址:Anaconda|IndividualEdition第三步:安装scrapycmd命令:condainstall-cconda-forgescrapy第四步:创建scrapy项目:新建一个文件夹作为存放项目的空间:cmd到存放项目的文件夹:s......
  • 直播平台搭建,编辑距离控制和调节
    直播平台搭建,编辑距离控制和调节 /** *@param{string}word1 *@param{string}word2 *@return{number} */varminDistance=function(word1,word2){ letdp=Array.from(Array(word1.length+1),()=>  Array(word2.length+1).fill(0) ); /*base......
  • vue的混入mixin
    功能:可以说把各个组件共用的配置提取成一个混入对象使用方式第一步订阅混合,例如:constobj={data(){...},methods:{...},...}第二部使用混合,例如:1、引入对象importxxxfrom"..."2、使用混入(1).全局混入:Vue.mixin(xxx)(2).局部混入:mixins:['xxx']......
  • vue3全局注册的另一种方式——插件注册
    1.新建一个index.ts,用于管理所有全局组件//引入项目中全部的全局组件importSvgIconfrom"./SvgIcon/index.vue";importPaginationfrom"./Pagination/index.vue";//全局对象constallGlobalComponent=<any>{SvgIcon,Pagination};//对外暴露插件对象exportde......
  • vue的插件使用
    vue插件功能:用于增强Vue本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。1、定义插件:对象.install=function(Vue,options){//1、添加全局过滤器Vue.filter(....)//2、添加全局指令Vue.directive(.......
  • 系统化学习前端之Vue(vue2 组件通信)
    前言前文vue2基础中聊过,页面本质是DOM树,而在vue2中组件=vm实例对象=DOM。因此,页面其实也是组件树构成,组件之间形成父子关系,兄弟关系等,相互之间通信也是组件树的必须要求。vue2组件通信组件通信即组件之间的数据传递。props和$emit$attrs和$listener$parent......
  • 手把手教你腾讯云搭建RUOYI系统
    手把手教你腾讯云搭建RUOYI系统前置准备腾讯云配置1服务器准备1.1腾讯云购买地址:1.2配置开放端口2软件安装2.1MySQL在线安装2.2Redis安装2.3ngnix安装2.4jdk安装2.5maven3软件运行3.1打包java3.1打包vue4成功常用命令汇总问题汇总如果问题还是解决不了请联系我......