1. Toy模板网首页
  2. > Toy博客

Vue初始

10月前 作者：李桥桉 分类：Toy博客 阅读(1) 违法举报

这篇具有很好参考价值的文章主要介绍了Vue初始。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、Vue的概述

Vue 发音类似 view

Vue 游雨溪 鱿鱼须 鱿鱼须不懂Vue

Vue历史

Angular React Vue

2013 Seed

2013 Seed命名为Vue

2014 Vue正式发布 0.8 - 0.10

2015 6.13 0.12

2015下半年 vue-cli vueRouter vueX 版本好1.0 vue正式跨入大众 渐进式框架(JQuery)

2016国庆 2.0.0 Vue正式成为三大主流框架 2版本 借鉴了 React diff算法 虚拟dom

2019 vue 2.6.0 为3版本打下基础

2020 3.0正式问世

现在 vue 2.7版本 是2版本的最高版本 (很多很多老项目用的还是vue2.0得有人维护)

vue 3.0是当前的正式版本

Vue2全家桶 =》 Vue VueRouter VueX axios

Vue的官网:Vue.js (vuejs.org)

库与框架

库 Library 是一些封装好的东西 一般来说功能局限 库完全由开发者控制 更便向于单一工具

框架 Framework 是一套完整的功能集合 帮助开发者解决问题的一整套方案 操作在框架

Jquery 封装了js的一些操作

Vue => html css js 路由 状态机

Vue使用

 

    

  1. <!-- 从三方网站 引入网上的vue 需要网络 -->
    2. 

  2. <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->
    3. 

  3. <!-- 本地引入 -->
    4. 

  4. <script src="./js/vue.js"></script>
    5. 



 

    

  1. <div id="app">
    2. 

  2. {{title}}
    3. 

  3. </div>
    4. 



 

    

  1. let vm = new Vue({
    2. 

  2. el: '#app',
    3. 

  3. data: {
    4. 

  4. title : "蜗牛"
    5. 

  5. }
    6. 

  6. });
    7. 



 

    

  1. 推荐使用这种
    2. 

  2. let vm = new Vue({
    3. 

  3. data() {
    4. 

  4. return {
    5. 

  5. title: "蜗牛"
    6. 

  6. }
    7. 

  7. }
    8. 

  8. });
    9. 

  9. vm.$mount('#app');
    10. 



 

    

  1. // 取消Vue提示你正在使用开发模式的Vue
    2. 

  2. Vue.config.productionTip = false;
    3. 



Vue devtools 点击扩展 获得扩展 搜索安装即可
 

但是这样开发效率不高 麻烦
 

我们一般采用脚手架来完成开发
 

Vue的脚手架使用
 

  1. 安装工具类的包 一般是全局安装


npm i -g @vue/cli 当前 vue2 => vue-cli 5.0.8
 

注意当前vue脚手架是webpack打包的
 

  1.  
    构建项目
     
  
      

    1.  
      vue create 项目名称(不可以是中文)
       
       
    
        

      1. Vue CLI v5.0.8
        2. 

      2. ? Please pick a preset: Default ([Vue 3] babel, eslint) 默认vue3 babel, eslint
        3. 

      3. Default ([Vue 2] babel, eslint) 默认vue2 babel, eslint
        4. 

      4. >Manually select features 自定义安装
        5. 

      

       
    
        

      1. Vue CLI v5.0.8
        2. 

      2. ? Please pick a preset: Manually select features? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
        3. 

      3. (*) Babel> 转化器 选择插件
        4. 

      4. ( ) TypeScript
        5. 

      5. ( ) Progressive Web App (PWA) Support
        6. 

      6. ( ) Router
        7. 

      7. ( ) Vuex
        8. 

      8. (*) CSS Pre-processors css预处理器 sacc less 
        9. 

      9. ( ) Linter / Formatter 语法校验 先不用 校验比较严格
        10. 

      10. ( ) Unit Testing
        11. 

      11. ( ) E2E Testing
        12. 

      

       
    
        

      1. Vue CLI v5.0.8
        2. 

      2. ? Please pick a preset: Manually select features? Check the features needed for your project: Babel, CSS Pre-processors
        3. 

      3. ? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
        4. 

      4. > 3.x 
        5. 

      5. 2.x 选择2版本
        6. 

      

       
    
        

      1. ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
        2. 

      2. > Sass/SCSS (with dart-sass) 选择预处理器
        3. 

      3. Less 
        4. 

      4. Stylus
        5. 

      

       
    
        

      1. ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) 独立配置文件还是放在package.json中
        2. 

      2. > In dedicated config files
        3. 

      3. In package.json
        4. 

      

      2. 

    2.  
      vue ui 不建议使用
       
      Vue初始
       
      Vue初始
       
      Vue初始
       
      Vue初始
       
      Vue初始
       
      Vue初始
       
      Vue初始
       
      3. 

    



Vue的文件结构
 

Vue初始
 

vue的运行
 

npm run serve 开发运行
 

注意 需要直到你当前是不是在vue项目中
 

 

    

  1. DONE Compiled successfully in 12612ms 22:03:34 
    2. 

  2. App running at:
    3. 

  3. - Local: http://localhost:8080/ 这个地址是本地地址 自己访问
    4. 

  4. - Network: http://192.168.31.53:8080/ 这个地址是局域地址 统一局域网可以访问
    5. 

  5. 

  6. Note that the development build is not optimized.
    7. 

  7. To create a production build, run npm run build.
    8. 



停止项目运行 Ctrl + c
 

注意 千万不要 open with live server
 

npm run bulid 打包上线
 

 

    

  1. DONE Compiled successfully in 13237ms 22:06:32 
    2. 

  2. File Size Gzipped
    3. 

  3. 

  4. dist\js\chunk-vendors.dad59269.js 86.25 KiB 30.63 KiB
    5. 

  5. dist\js\app.37bcdf10.js 11.12 KiB 7.94 KiB
    6. 

  6. dist\css\app.544ffb88.css 0.33 KiB 0.23 KiB
    7. 

  7. 

  8. Images and other types of assets omitted.
    9. 

  9. Build at: 2023-05-09T14:06:32.391Z - Hash: 93f21783a64724c5 - Time: 13237ms
    10. 

  10. 

  11. DONE Build complete. The dist directory is ready to be deployed.
    12. 

  12. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
    13. 

  13. 

  14. PS D:\凡云5期\02-codes\03-第三阶段-代码\0509\vue02>
    15. 



打包完毕的不能直接运行 需要放在服务器上
 

二、Vue内部结构
 

Vue组件概述
 

    

  1. 非单页面组件 -> 没有独立文件的组件 暂时不讲(作为补充的时候在讲解)
    2. 

  2. 单页面组件 -> xxx.vue
    3. 



单页面组件 包括三部分 （html [<template></template>标签>] css [<style></style>]）javascript [<script></script>]
 

 

    

  1. vue2规定 组件只能有一个 根标签
    2. 

  2. Component template should contain exactly one root element.
    3. 

  3. 标签都可以在vue中完美显示
    4. 

  4. 

  5. style scoped lang="scss"
    6. 

  6. lang 是设计其语言的 less scss css stylus 看你css预处理器选择的是啥
    7. 

  7. 

  8. scoped是局部的意思 使用这个标识 在标签上会添加一个自定义属性 用来当做唯一标识 data-v-xxxxx
    9. 

  9. 局部生效
    10. 



Vue初始
 

组件样式
 

样式导入
 

 

    

  1. css 中
    2. 

  2. @import url("css样式文件路径")
    3. 

  3. 以上写法不管写不写scoped都是全局样式
    4. 

  4. 

  5. @import "css样式路径"
    6. 

  6. 这种写法 加scoped就是局部样式，不写就是全局样式 一般不使用这种写法
    7. 

  7. 

  8. js 
    9. 

  9. import "css样式路径"
    10. 

  10. 这种写法就是全局样式
    11. 

  11. 

  12. @ ==》 src这个文件夹
    13. 



单页面组件的分类
 

 

    

  1. 1.布局组件 LayoutView.vue 主要负责 结构 样式
    2. 

  2. 2.功能组件 CtrlView.vue 主要负责的 小部分的功能 查询 表格 模态框 分页 ...
    3. 



单页面组件规则文章来源地址https://www.toymoban.com/news/detail-454574.html
 

 

    

  1. 1. 单页面组件的命名 需要使用大驼峰命名 且两个单词以上 如果没有思路起名 名字+View TableView.vue
    2. 

  2. 2. 样式不是必须选项，js某种意义上说也是非必须得，但是没有不需要的时候，html必须存在
    3. 



自定义组件过程
 

 

    

  1. 1. 创建组件
    2. 

  2. 创建一个 xxxView.vue
    3. 

  3. <template>
    4. 

  4. <div>凡云</div>
    5. 

  5. </template>
    6. 

  6. 

  7. <script>
    8. 

  8. export default { // 将该组件导出
    9. 

  9. name:"FanYunView"
    10. 

  10. }
    11. 

  11. </script>
    12. 

  12. 

  13. <style lang="scss" scoped>
    14. 

  14. 

  15. </style>
    16. 

  16. 

  17. 2. 哪里需要使用组件 哪里需要导入
    18. 

  18. import 组件名称 form "@/xxxx/xxxx/xxxx[.vue]"
    19. 

  19. 

  20. 3. 需要在 export default中的 components 中注册组件
    21. 

  21. export default {
    22. 

  22. name: 'App',
    23. 

  23. components: { // 注册组件
    24. 

  24. HelloWorld,
    25. 

  25. FanYunView
    26. 

  26. }
    27. 

  27. }
    28. 

  28. 

  29. 4. 调用组件
    30. 

  30. 方法一 ： 大驼峰方式调用
    31. 

  31. 方法二 ： 蛇形方式 全小写
    32. 

  32. 注意 组件调用必须封闭 自封闭 或者 标签封闭都可以
    33. 

  33. 

  34. <fan-yun-view></fan-yun-view>
    35. 

  35. <FanYunView></FanYunView>
    36. 

  36. <fan-yun-view />
    37. 

  37. <FanYunView />
    38. 



 

    

  1. 组件数据定义
    2. 

  2. data(){
    3. 

  3. return {
    4. 

  4. name : "张三",
    5. 

  5. age : 18
    6. 

  6. }
    7. 

  7. }
    8. 

  8. 

  9. 模版语法
    10. 

  10. 使用数据 {{}} Mustache 双大括号语法
    11. 

  11. {{}}可以使用变量 常量 以及表达式(表达式一定会产生一个值)
    12. 

  12. 

  13. <div>{{ title }}</div>
    14. 

  14. <div>{{ 10 > 5 ? 10 : 5 }}</div>
    15. 

  15. <div>{{ "123" }}</div>
    16. 

  16. <div>{{ "123".substring(1,2) }}</div>
    17. 

  17. <div>{{ new Date() }}</div>
    18. 

                    
到了这里，关于Vue初始的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

                

                

                                                

                   

                       
                            
                            
                            
                            
                    
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

                

                                

                    
分享到：

                    领支付宝红包
                    赞助服务器费用
                

                            

            

		        
相关文章

			    
    
			        			        
  • 
			                                    
    
                            
                                看不懂来打我，vue3如何将template编译成render函数
                            
                        
    
                                                
    
                            
    
                                看不懂来打我，vue3如何将template编译成render函数
                            
    
                            
    
                                
    在之前的 通过debug搞清楚.vue文件怎么变成.js文件 文章中我们讲过了vue文件是如何编译成js文件，通过那篇文章我们知道了，template编译为render函数底层就是调用了 @vue/compiler-sfc 包暴露出来的 compileTemplate 函数。由于文章篇幅有限，我们没有去深入探索 compileTemplate 函数是如何
    
                            
    
                            
    
                                2024年04月11日
                                
    
                                    浏览(42)
                                 
    
                            
    
                        
    
                    
    • 			        
  • 
			                                    
    
                            
                                java的面向对象编程（oop）——static概述及初始单例设计模式
                            
                        
    
                                                
    
                            
    
                                java的面向对象编程（oop）——static概述及初始单例设计模式
                            
    
                            
    
                                
    过了入门阶段，开始学习进阶语法了。每天进步一点点，打好基础，daydayup! 什么是面向对象编程（oop），可以看这篇 java的面向对象编程（oop）概述及案例  static的意思为静态，用于修饰成员变量及成员方法。 成员变量根据有无static可以分为两种 ——类变量及实例变量 1，类
    
                            
    
                            
    
                                2024年01月19日
                                
    
                                    浏览(52)
                                 
    
                            
    
                        
    
                    
    • 			        
  • 
			                                    
    
                            
                                Luckysheet类似excel的在线表格(vue)
                            
                        
    
                                                
    
                            
    
                                Luckysheet类似excel的在线表格(vue)
                            
    
                            
    
                                
    参考文档：快速上手 | Luckysheet文档   在vue项目的public文件夹下的index.html的head标签里面引入 可以自行编辑数据，也可以将数据渲染上去进行展示与二次编辑 上面的“filteredArr2”可以拿到表格中不为null的数据，后续其他功能可以在文档里查找。
    
                            
    
                            
    
                                2024年01月21日
                                
    
                                    浏览(41)
                                 
    
                            
    
                        
    
                    
    • 			        
  • 
			                                    
    
                            
                                React V6实现类似与vue的eventBus
                            
                        
    
                                                
    
                            
    
                                React V6实现类似与vue的eventBus
                            
    
                            
    
                                
    功能背景 想要实现类似于vue的eventBus的功能，由一个组件通知其他一个或多个组件。应用场景：比如一个可视化大屏的界面，当筛选条件变化的时候，要同时通知到大屏中所有图表一起变化。（当然使用store也是可以的，eventbus就是相当于多了一个解决方案） 代码实现 eventB
    
                            
    
                            
    
                                2024年02月11日
                                
    
                                    浏览(47)
                                 
    
                            
    
                        
    
                    
    • 			        
  • 
			                                    
    
                            
                                pnpm快速创建 Vue.js 项目(npm类似)
                            
                        
    
                                                
    
                            
    
                                pnpm快速创建 Vue.js 项目(npm类似)
                            
    
                            
    
                                
    目录 pnpm 创建一个 Vue.js 项目 前提准备： 运行创建命令： 选择项目配置：（按需选择） cd +项目名：（进入项目终端） 安装项目依赖： 运行项目： 前提准备： 确保已安装 pnpm。如果没有，请运行以全局安装 pnpm。 npm install -g pnpm 打开终端并导航到要在其中创建项目的目录。
    
                            
    
                            
    
                                2024年02月10日
                                
    
                                    浏览(50)
                                 
    
                            
    
                        
    
                    
    • 			        
  • 
			                                    
    
                            
    
                                用Vue仿了一个类似抖音的App
                            
    
                            
    
                                
    大家好，我是 Java陈序员 。 今天，给大家介绍一个基于 Vue3 实现的高仿抖音开源项目。 关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。 douyin —— 一个基于 Vue、Vite 实现，模仿抖音的移动端短视频项目。 这个项目的作者原
    
                            
    
                            
    
                                2024年04月08日
                                
    
                                    浏览(36)
                                 
    
                            
    
                        
    
                    
    • 			        
  • 
			                                    
    
                            
    
                                vue+openLayers闪烁图形/线段/点 都可以使用类似的方法
                            
    
                            
    
                                
    基础方法 1.先定义两个样式，闪烁时两个样式相互交换 2.利用定时器（单数的时候样式一，双数的时候样式二）由此来实现闪烁效果 先给主要代码如下（最后有全部代码）： mapTool.js vue页面代码
    
                            
    
                            
    
                                2024年01月24日
                                
    
                                    浏览(45)
                                 
    
                            
    
                        
    
                    
    • 			        
  • 
			                                    
    
                            
    
                                vue uniapp 防止按钮多次点击（类似于防抖节流）
                            
    
                            
    
                                
    common文件并创建anti-shake.js文件 man.js文件中引入 页面里使用即可 不传参，直接传一个方法就行 带参数,传一个方法和一个参数就行 
    
                            
    
                            
    
                                2024年02月11日
                                
    
                                    浏览(38)
                                 
    
                            
    
                        
    
                    
    • 			        
  • 
			                                    
    
                            
                                不到200行用Vue实现类似Swiper.js的轮播组件
                            
                        
    
                                                
    
                            
    
                                不到200行用Vue实现类似Swiper.js的轮播组件
                            
    
                            
    
                                
    大家在开发过程中，或多或少都会用到轮播图之类的组件，PC和Mobile上使用 Swiper.js ，小程序上使用swiper组件等。 本文将详细讲解如何用 Vue 一步步实现的类似 Swiper.js 的功能，无任何第三方依赖，干货满满。 在线预览：https://zyronon.github.io/douyin/ 项目源代码：https://github.com/
    
                            
    
                            
    
                                2024年04月23日
                                
    
                                    浏览(34)
                                 
    
                            
    
                        
    
                    
    • 			        
  • 
			                                    
    
                            
                                vue2+three.js实现类似VR、3D全景效果
                            
                        
    
                                                
    
                            
    
                                vue2+three.js实现类似VR、3D全景效果
                            
    
                            
    
                                
    效果图： 俩图标是我自己加的前进后退按钮，也是百度了好久，再加上GPT的帮助，才给搞出来。因为需求急，都不看官方文档，百度到一个能跑的demo之后改吧改吧，就先用着了。 下面是代码： 这里 代码有很多用不到的地方和需要优化的地方，我是来不及改了，就先这样吧
    
                            
    
                            
    
                                2024年02月15日
                                
    
                                    浏览(53)
                                 
    
                            
    
                        
    
                    
    • 			    

			

        

                
    

    



    
觉得文章有用就打赏一下文章作者



    
支付宝扫一扫打赏

    
博客赞助





    
微信扫一扫打赏

    
请作者喝杯咖啡吧~博客赞助











    
支付宝扫一扫领取红包，优惠每天领

	

	    
二维码1

	    
领取红包

	

	

	    
二维码2

	    
领红包