vue20220919

最新推荐文章于 2024-07-23 11:05:47 发布
最新推荐文章于 2024-07-23 11:05:47 发布
阅读量140 收藏
点赞数
文章标签： vue.js javascript npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsp365954496/article/details/126930098
版权

Vue学习笔记

Angular

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试，Vue3 请参阅 Vue3 教程。

环境搭建

Nodejs安装

https://nodejs.org/dist/v16.16.0/node-v16.16.0-x64.msi

官网下载，安装，略

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EJq180pq-1663557232628)(E:\typoraImage\image-20220918180949470.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2IVUGnHt-1663557232629)(E:\typoraImage\image-20220918181013921.png)]

进入控制台，查看对应的版本 node版本，npm的版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hj84MrkF-1663557232629)(E:\typoraImage\image-20220802114948172.png)]

cnpm安装

npm i -g cnpm --registry=https://registry.npm.taobao.org

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6f0dmNGu-1663557232629)(E:\typoraImage\image-20220802115148170.png)]

VSCode的安装

http://www.456hao.com/tag/vscode

VSCode插件的安装

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LahZ0GfP-1663557232630)(E:\typoraImage\image-20220913162516054.png)]

vue文件的模板

文件 ==> 首选项 ==> 用户代码片段 ==> 输入 vue 然后回车

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pi9Q1ZHl-1663557232630)(E:\typoraImage\image-20220913164245676.png)]

 {
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div>",
            "    $0",
            "  </div>",
            "</template>",
            "",
            "<script>",
            "",
	    "  import { reactive ,toRefs,computed,onMounted,onBeforeMount,onUnmounted} from 'vue';",
	    "  import { ElMessage,ElMessageBox  } from 'element-plus';",
	    "  import md5 from 'js-md5';",
            "  export default {",
            "    name:'$0',",
            "    setup(){",
            "      const data = reactive({})",
	    "      //页面加载完成后执行",
	    "      onMounted(() => {})",
	    "      //页面加载前执行",
	    "      onBeforeMount(()=>{})",
	    "      //销毁",
	    "      onUnmounted(() => {})",
	    "      return{",
	    "          ...toRefs(data),//打散数据对象，在外部就黑直接使用",
	    "      }",
	    "    }",
            "  }",
            "",
            "</script>",
            "<style scoped>",
            "",
            "</style>"
        ],
        "description": "Log output to console"
    }
}

字体大小写

https://www.cnblogs.com/luzhanshi/p/11993813.html
文件=》首选项=》设置
"editor.mouseWheelZoom": true

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-052Dzu2e-1663557232631)(E:\typoraImage\image-20220918181927946.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LcPYo1yU-1663557232632)(E:\typoraImage\image-20220918182010520.png)]

浏览器插件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RfRjsLNT-1663557232632)(E:\typoraImage\image-20220918191127855.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0yajOCEV-1663557232633)(E:\typoraImage\image-20220918191144704.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o0G4XREQ-1663557232634)(E:\typoraImage\image-20220918191251581.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8m19Zp9e-1663557232634)(E:\typoraImage\image-20220918191337236.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4tnSC2OR-1663557232635)(E:\typoraImage\image-20220918191448539.png)]

安装完成后，F12进入浏览器的调试界面，打开vue选项卡，一路next，完成后，就可以使用vue插件进行调试了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A70tRqJO-1663557232636)(E:\typoraImage\image-20220918192353930.png)]

各种命令介绍

vs_code 开发vue 参考文档
https://www.cnblogs.com/kiba/p/15351265.html

https://www.cnblogs.com/zyskr/p/10609288.html
插件
https://segmentfault.com/a/1190000019203847
https://segmentfault.com/a/1190000014785115
vue-cli的使用
https://www.cnblogs.com/liaoanran/p/8042893.html
vue-cli create 都做了什么
https://www.jianshu.com/p/86b49bb68f54

vue-cli create 创建项目
https://www.cnblogs.com/coober/p/10875647.html

vue开源项目
https://www.sohu.com/a/405500958_463987

vue模板创建
https://www.cnblogs.com/sunyanblog/p/13086497.html
https://segmentfault.com/a/1190000019084920?sort=newest

localstorage与vuex的区别
https://www.jianshu.com/p/2ad1d552727a
https://www.linuxprobe.com/vue-token-linux.html

localStorage与sessionStorage的区别
https://juejin.cn/post/6844903516826255373
可以使用vue-ls进行替换

setup语法糖
https://www.cnblogs.com/onesea/p/15602810.html
https://wenku.baidu.com/view/52feea6828160b4e767f5acfa1c7aa00b52a9d96.html?fr=sogou

各种项目插件安装

安装国内镜像 cnpm,在vsCode的提供的终端执行会报错，在windows的控制台下可以正常运行。
npm i -g cnpm --registry=https://registry.npm.taobao.org

安装less 用于解析css文件的less写法
npm install less less-loader --save
或
npm install less less-loader --save-dev

安装scss
npm install node-sass --save-dev
npm install sass-loader --save-dev


安装vue-router 用于路由管理
cnpm install vue-router  --save
或npm install vue-router  --save

安装jquery
cnpm install jquery --save 或者 npm install jquery --save

安装axios 用于前后端的通讯
cnpm install axios --save 或 npm install axios --save

安装element-plus（页面插件，可以使用element-plus  注意vue2对应element-ui，vue3对应element-plus）
cnpm install element-plus --save 或 npm install element-plus --save

安装element-plus图标
npm install @element-plus/icons-vue

vuex全局状态管理器（或者只用localstorage保存）
npm install vuex@3.6.2 --save    安装指定的版本
npm install vuex --save         安装最新版本
注意：vue2 对应 vuex3
     vue3  对应 vuex4


vue 中的md5加密
npm install js-md5 --save

安装typescript
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
npm -g install typescript
npm install typescript --save

安装 vue-i18n 国际化
npm install vue-i18n --save

安装 Ts
npm install -g typescript
npm install -g ts-loader 
npm install -g vue-loader 
这里说明一下，如果插件安装进度失败，可以Ctrl+C，停止该命令，重新执行，可以多执行几次

创建项目

新建项目

vue create 项目名 回车

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XXDxnwAG-1663557232637)(E:\typoraImage\image-20220918140901793.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ii9zo5Yv-1663557232637)(E:\typoraImage\image-20220918141026525.png)]

选择vue的版本，我们选择的是vue3

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KfKAqMJP-1663557232638)(E:\typoraImage\image-20220918141056266.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SeOcDIex-1663557232638)(E:\typoraImage\image-20220918141228707.png)]

选择动态css

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ykvfY1bE-1663557232638)(E:\typoraImage\image-20220918141326650.png)]

回车后开始创建项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WLxeaxHA-1663557232639)(E:\typoraImage\image-20220918141414076.png)]

项目创建完毕

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mvKtfnVJ-1663557232639)(E:\typoraImage\image-20220918141441048.png)]

使用vsCode打开项目文件夹，如果在开发过程中还要在项目中安装其他插件，可以打开vscode提供的终端窗口，直接通过命令安装即可

步骤：
新建一个文件夹，使用vscode打开，选择打开终端，如下图，在终端执行下列命令
安装vuecli
npm install -g vue-cli
npm install @vue/cli -g
npm i -g @vue/cli

https://zhuanlan.zhihu.com/p/121826665
https://zhuanlan.zhihu.com/p/43510804

查看版本
vue -V
使用脚手架创建vue项目
vue create 项目名

（注：上面的代码如果终端报错，就在console控制台执行，每创建一个项目，就会新建一个文件夹，使用vs打开的文件夹，实际上是父文件夹）

查看已经安装的插件消息，打开package.json文件，安装项目所需依赖

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rHMaHv97-1663557232639)(E:\typoraImage\image-20220908115918155.png)]

项目结构介绍

https://www.jianshu.com/p/f4e95663e10d
https://jingyan.baidu.com/article/1612d50017033fa20e1eeefe.html
https://baijiahao.baidu.com/s?id=1695710044826816273
https://zhuanlan.zhihu.com/p/105136924
https://www.jb51.net/article/131367.htm

放置路由组件
pages（page） 或 views（view）


vue ui
https://www.jb51.net/article/182196.htm
目录结构
https://www.runoob.com/vue3/vue3-directory-structure.html

首先我们先看以下用 Vue-Cli 创建项目的整体结构：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2iQYte7b-1663557232640)(E:\typoraImage\5ed845a109b4cac203360708.jpg)]
项目相关的代码，我们都放在 src 的文件夹中，该文件夹中的结构如下：

  • assets 是资源文件夹，通常我们会把图片资源放在里面。
  • components 文件夹通常会放一些组件。（通用组件，多个页面共用的组件，header.vue,footer.vue,静态组件，）
  • router 文件夹里面放的是 VueRouter 的相关配置（路由的配置，路由（直接替换页面中的某一个部分）----超链接）。
  • store 文件夹里面放的是 Vuex 的相关配置（全局变量的保存，或者使用LocalStorage，sessionStorage替代）。
  • views 文件夹里面通常放置页面的 .vue 文件（路由的组件，通过超链接访问的vue文件）。
  • App.vue 定义了一个根组件（所有的组件都是在App.vue上显示的，），App.vue文件又是在index.html上显示的。
  • main.js 是项目的入口文件。

启动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rbWNd1VQ-1663557232640)(E:\typoraImage\image-20220908084731443.png)]

打开vscode,运行调试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tyvZyMOf-1663557232640)(E:\typoraImage\image-20220908090812219.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h0o4O9EX-1663557232641)(E:\typoraImage\image-20220908090914281.png)]

项目启动后的调试按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OFeEk7bQ-1663557232641)(E:\typoraImage\image-20220908091043698.png)]

启动后的消息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8elqJmhn-1663557232641)(E:\typoraImage\image-20220908091123379.png)]

修改启动的端口号并打开首页,修改package.json文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5FXIeSv8-1663557232642)(E:\typoraImage\image-20220908091316030.png)]

修改后的代码如下

"scripts": {
    "serve": "vue-cli-service serve --open --host localhost --port 3000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  
  
  
  。。。。。。。
  
  --open  自动打开
  --host localhost 服务器是localhost
  --port 8080 启动端口是8080

其他，处理变量声明后不使用，程序报错，打开vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave : false,
})

修改@符合代表src目录,在项目根目录下新建一个jsconfig.json 文件

{
    "compilerOptions": {
      "target": "es6",
      "module": "esnext",
      "baseUrl": "./",
      "moduleResolution": "node",
      "paths": {
        "@/*": [
          "src/*"
        ]
      },
      "lib": [
        "esnext",
        "dom",
        "dom.iterable",
        "scripthost"
      ]
    }
  }

基础编程

Vue3 模板语法

插值

文本

v-text,v-html

还可以使用v-text,v-html 输出

1.v-text：会把h1标签转义输出。即原模原样输出，h1标签没效果
2.v-html：会直接输出结果。即h1标签会出效果

指令：v-开头，

把html标签的属性，动态的绑定到vue.js上，当vue的data中的数据发生变化时，html标签属性值也会发生变化

v-bind

语法： v-bind:标签的属性=“vue中data中的变量”

​ 简便的写法 :标签的属性=“vue中data中的变量”

v-on

动态绑定函数。

语法： v-on:事件名=“方法名”

​ @事件名=“方法名”

Vue3 条件语句

条件判断

v-if,v-else,v-else-if,v-show,当变量值是true就显示，否则就不显示

Vue.js 循环语句

v-for

Vue3 组件

新建组件

导入组件，注册，使用

Vue3 计算属性

computed

双向绑定（v-model）

一般用在有value属性的控件上，在vue3中可以使用ref处理

<!--
     :value 等价于 v-bind:value  单向绑定，只有修改vm的变量后，输入框的值才会变化，但是修改输入框的值，变量不会发生变化
     v-model:value 双向绑定，简写为 v-model ,修改vm的变量后，输入框的值会变化，修改输入框的值，变量会发生变化
-->
<input type="text" v-model ="message"/>
<hr />
<span>结果是：{{message}}</span>

Vue3 表单

生命周期

高级编程

axios

vuex

localstorage

vue-router（路由）

Vue3 组合式 API

https://juejin.cn/post/7107924518466748453

https://juejin.cn/post/7091823718737362958

https://www.jianshu.com/p/8cf9cb9f9923

前后端分离

Token

jwt

跨域访问（@CrossOrigin 与过滤器）

封装response（map，@ResponseBodyAdvice）

element-plus

虚拟数据网站使用

框架的用法

面包屑导航

菜单

对话框

message 消息框

走马灯

表单（验证方式）

搜索框

table，分页控件

Loading控件

Icon

国际化设置（自定义国际化）

文件上传

tree

项目开发

OA项目（使用vue技术，开发前端，使用springboot+myBatisplus+mysql 实现后端）

其他

nodejs中module.exports和exports的区别

https://zhuanlan.zhihu.com/p/87729137

图片验证码

https://www.jb51.net/article/138526.htm

Nodejs跨域访问

https://www.cnblogs.com/tengrl/p/10729277.html

p/8cf9cb9f9923

前后端分离

Token

jwt

跨域访问（@CrossOrigin 与过滤器）

封装response（map，@ResponseBodyAdvice）

element-plus

虚拟数据网站使用

框架的用法

面包屑导航

菜单

对话框

message 消息框

走马灯

表单（验证方式）

搜索框

table，分页控件

Loading控件

Icon

国际化设置（自定义国际化）

文件上传

tree

项目开发

OA项目（使用vue技术，开发前端，使用springboot+myBatisplus+mysql 实现后端）

其他

nodejs中module.exports和exports的区别

https://zhuanlan.zhihu.com/p/87729137

图片验证码

https://www.jb51.net/article/138526.htm

Nodejs跨域访问

https://www.cnblogs.com/tengrl/p/10729277.html

pengpengzsp365954496
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目案例
搬砖中
12-30 2万+
路由：index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import First from '../views/first.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: First }, { path: '/about', ..
【NodeJS】修改npm的registry为淘宝镜像(npm.taobao.org)
'Ablaze 的专栏
01-07 3万+
转载自：https://www.cnblogs.com/Zhou-HaHa/p/6384418.html 镜像使用方法（三种办法任意一种都能解决问题，建议使用第三种，将配置写死，下次用的时候配置还在）: 1、通过config命令 npm config set registry https://registry.npm.taobao.org npm info underscore （如果...
Vue3生命周期
m0_57341617的博客
08-19 11万+
vue3生命周期钩子函数，vue3和vue2钩子的变化
vue 3.0 使用ref获取dom元素
热门推荐
好巧的博客
09-24 13万+
答：检查是在哪里进行的console.log，setup函数相当于vue2中的beforeCreate, created阶段，如果直接在setup中直接使用console.log获取ref，返回的自然是null。当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。最后，希望在提出疑问前请创建一个新项目，将文章中的示例代码完完整整的拷贝到新项目的app.vue中，运行后可直接查看效果。// 存储dom数组。
Vue适配浏览器
qq_33322515的博客
02-17 5739
Vue适配浏览器调研，网上部分资料查询综合
Vue的特点
simple_Xsg的博客
05-24 1万+
一、特点 1、组件化。保留了 react 框架的优点，实现了封装和重用，且组件间可以相互嵌套； 2、轻量级。相对于其他框架，Vue学习成本低，简单易上手； 3、虚拟 DOM。虚拟 dom 中存在 diff算法，是 cpu 密集型运算，占用内存较少，可以提高运行效率，并压缩运行时体积； 4、Vue是一个MVVM框架，数据绑定。数据单项绑定（v-bind），单向指data中的值绑定到视图中，但视图中修改不会影响到data数据；双向绑定（v-model），数据发生变化会驱动视图的更新，视图的更新也会驱动数
Vue-重定向
m0_55755186的博客
04-18 1万+
Vue 重定向
Vue 使用Echarts
chenfairy的博客
02-08 8742
在vue中使用echarts有两种方法 一、安装并全局引入 1、通过npm获取echarts npm install echarts --save 2、在 main.js 中添加下面两行代码 import echarts from 'echarts' Vue.prototype.$echarts = echarts //挂载到Vue实例上面 二、使用https://echa...
Vue登录页面
02-11
first_vue 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
vue 项目源码
08-07
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。这个"vue 项目源码"很可能是某个公司在实际开发过程中创建的一个Vue项目实例，包含了完整的前端应用代码。在这个项目中，我们可以深入理解Vue的核心...
尚硅谷vue3.0笔记
05-30
尚硅谷vue3.0笔记
vue-devtools
12-15
Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。Vue DevTools 是一款强大的开发者工具，专为Vue应用程序设计，提供了一种便捷的方式来检查、调试和理解Vue组件的生命周期、状态和性能。它允许开发者深入...
vue vue vue vue vue vue vue
06-25
vue案例讲解 简单讲解 基础知识 未学习人群
Vue 路由重定向
Seric_xiao的博客
09-23 2万+
路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面； 通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向： var router = new VueRouter({ routes: [ // 其中，path 表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址 //当用户在地址栏中输入`/`,会自动的跳转到`/user`,而`/user`对应的
vue中预览视频，word，pdf，xlsx
小小小猿
07-22 327
如果vue版本是vue2.6版本或者以下版本还需要安装@vue/composition-api。
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 442
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
最新发布
从业计算机毕业设计10年，打算用一年时间分享10年毕设经验！
07-23 435
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
Vue组件精讲
《Vue组件精讲》是一本关于Vue.js框架的前端开发技术小册，主要介绍了Vue.js组件的核心思想和使用技巧。作者在本小册中着重分享了自己在3年的Vue.js开发和两年的iView开源项目中所积累和沉淀的关于Vue.js组件的见解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值