【万字长文】 Vue全家桶从入门到实战，超详细笔记整理 ( 三 ) （建议收藏）_vue(1)

最新推荐文章于 2024-05-16 13:41:46 发布

2401_84434331

最新推荐文章于 2024-05-16 13:41:46 发布

阅读量400

点赞数 4

分类专栏：程序员文章标签： vue.js 笔记 arcgis

本文链接：https://blog.csdn.net/2401_84434331/article/details/138598304

版权

程序员专栏收录该内容

181 篇文章 0 订阅

订阅专栏

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

5.配置淘宝镜像

  npm config set registry https://registry.npm.taobao.org
  npm config get registry

6.配置npm下载依赖位置

 windows:
	npm config set cache "D:\nodereps\npm-cache"
	npm config set prefix "D:\nodereps\npm\_global"
 mac os:
 	npm config set cache "/Users/chenyannan/dev/nodereps"
	npm config set prefix "/Users/chenyannan/dev/nodereps"

7.验证nodejs环境配置

npm config ls
; userconfig /Users/chenyannan/.npmrc
cache = "/Users/chenyannan/dev/nodereps"
prefix = "/Users/chenyannan/dev/nodereps"
registry = "https://registry.npm.taobao.org/"


##### 2、安装脚手架

0.卸载脚手架

npm uninstall -g @vue/cli  //卸载3.x版本脚手架
npm uninstall -g vue-cli  //卸载2.x版本脚手架

1.Vue Cli官方网站

https://cli.vuejs.org/zh/guide/

2.安装vue Cli

npm install -g vue-cli


##### 3、第一个vue脚手架项目



> 
> Vue-cli目录结构
> 
> 
> 


[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2QDNftWz-1627871421740)(Vue实战笔记（三）.assets/image-20210721155403325.png)\

1.创建vue脚手架第一个项目

vue init webpack 项目名

2.创建第一个项目

hello     ------------->项目名
-build  ------------->用来使用webpack打包使用build依赖  构建一些依赖文件
-config ------------->用来做整个项目配置目录   主要用来对 开发 测试 环境进行配置
-node_modules  ------>用来管理项目中使用依赖
-src					 ------>用来书写vue的源代码[重点]
	+assets      ------>用来存放静态资源 [重点]
  	components   ------>用来书写Vue组件 [重点]
  	router			 ------>用来配置项目中路由[重点]
  	App.vue      ------>项目中根组件[重点]
  	main.js      ------>项目中主入口[重点]
-static        ------>其它静态
-.babelrc      ------> 将es6语法转为es5运行
-.editorconfig ------> 项目编辑配置
-.gitignore    ------> git版本控制忽略文件
-.postcssrc.js ------> 源码相关js
-index.html    ------> 项目主页
-package.json  ------> 类似与pom.xml 依赖管理  jquery 不建议手动修改
-package-lock.json ----> 对package.json加锁
-README.md         ----> 项目说明文件

3.如何运行在项目的根目录中执行

npm run dev 运行前端系统

4.如何访问项目

http://localhost:8080

5.Vue Cli中项目开发方式

 注意: 一切皆组件   一个组件中   js代码  html代码  css样式
 	1. VueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块,日后可以将多个组件组合到一起形成一个前端系统
 	2. 日后在使用vue Cli进行开发时不再书写html,编写的是一个个组件(组件后缀.vue结尾的文件),日后打包时vue cli会将组件编译成运行的html文件



> 
> rc 目录
> 
> 
> 


`src`目录是项目的源码目录，所有代码都会写在这里！



> 
> main.js
> 
> 
> 


项目的入口文件，我们知道所有的程序都会有一个入口

// The Vue build version to load with the import command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue’ // 引入VUE核心库
import App from ‘./App’ // 引入一个当前目录下的名字为App.vue的组件
import router from ‘./router’

Vue.config.productionTip = false // 是否要在生产环境当中给予提示功能。

/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,
components: { App },
template: ‘’
})


* `import Vue from 'vue'`：ES6 写法，会被转换成 require(“vue”); （require 是 NodeJS 提供的模块加载器）其实就相当于

 `<script src = "vue"></script>`
* `import App from './App'` ：意思同上，但是指定了查找路径，./ 为当前目录
* `Vue.config.productionTip = false`：关闭浏览器控制台关于环境的相关提示
* `new Vue({})`：实例化 Vue


	+ `el: '#app'`：查找 index.html 中 id 为 app 的元素
	+ `template: '<App/>'`：模板，会将 index.html 中替换为
	+ `components: { App }` ：引入组件，使用的是 import App from ‘./App’ 定义的 App 组件;



> 
> App.vue
> 
> 
>

自定义脚手架


* template：HTML 代码模板，会替换 < App /> 中的内容
* export default{…}：导出 NodeJS 对象，作用是可以通过 import 关键字导入


	+ name: ‘App’：定义组件的名称
	+ components: { HelloWorld }：定义子组件
* 在hello,Vue中,关于 < style scoped> 的说明：CSS 样式仅在当前组件有效，声明了样式的作用域,是当前的界面私有的! 不加代表全局有效。



> 
> index.js 配置路由
> 
> 
>

import Vue from ‘vue’
import Router from ‘vue-router’
import HelloWorld from ‘@/components/HelloWorld’

Vue.use(Router) //注册路由 new Vue({router,})

export default new Router({
routes: [
{
path: ‘/’,
name: ‘HelloWorld’,
component: HelloWorld
}
]
})



> 
> HelloWorld.vue
> 
> 
>


##### 4、如何开发Vue脚手架


**注意:在Vue cli 中一切皆组件**


1、我们在HelloWorld.vue的同级目录下新建两个Student和User组件。


![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-liUgTnMu-1627871421742)(Vue实战笔记（三）.assets/image-20210721204921996.png)]](https://img-blog.csdnimg.cn/41464533b7cf4b1a82b403952aaba234.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)




---


2、`Student.vue`和`User.vue`组件


`Student.vue`组件

hello world {{msg}}

我是学生管理的主页


`User.vue`组件

hello world {{msg}}

我是用户管理的主页


3、在`App.vue`组件中引入这两个组件的链接，进行路由切换

自定义脚手架

<router-link to="/">主页</router-link>
<router-link to="/user">用户管理</router-link>
<router-link to="/student">学生管理</router-link>

<!--展示路由-->
<router-view/>


4、启动项目，测试一下


![](https://img-blog.csdnimg.cn/64d34ae67a4241e796493e5a35b48df7.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)


### 17、在脚手架中使用axios


#### 17.1、安装axios

1.安装axios

npm install axios --save

2.配置main.js中引入axios

import axios from 'axios';
Vue.prototype.$http=axios;

3.使用axios

在需要发送异步请求的位置:this.$http.get("url").then((res)=>{}) this.$http.post("url").then((res)=>{})




---


### 18、Vue Cli脚手架项目部署

1.在项目根目录中执行如下命令:

npm run build
注意:vue脚手架打包的项目必须在服务器上运行不能直接双击运行

2.打包之后当前项目中变化

在打包之后项目中出现dist目录,dist目录就是vue脚手架项目生产目录或者说是直接部署目录


### 19、webstorm开发vue cli项目


#### 19.1、简介


WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/b13e104123ae41f9857c0f47d2ea5077.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)


#### 19.2、安装


官网地址：http://www.jetbrains.com/webstorm/


选择好安装路径


![](https://img-blog.csdnimg.cn/5211f173b1ab4c8588fc09fb1c8c26d1.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)


#### 19.3、使用webstorm


webstorm和idea同属于一家开发公司，因此使用方式基本一样。



> 
> 使用webstorm初始化项目
> 
> 
> 


1、我们新建一个webstromcodes项目。


2、打开Terminal终端，输入`vue init webpack vue_day5` ，进行`vue-day5`项目的创建。


3、接下来的步骤和使用Vue Cli脚手架开发一样。


4、显示如下页面，项目初始化成功。


![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aCUzAuOB-1627871421744)(Vue实战笔记（三）.assets/image-20210722212053257.png)]](https://img-blog.csdnimg.cn/549231dbd2db4cb3b7db8333b59b8ace.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)


可以看下目录结构，和使用Vue CLI脚手架开发目录结构一致。


![](https://img-blog.csdnimg.cn/59310520ed554033ba087720cd49004d.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)


5、在Terminal终端输入`cd vue_day5`，进入当前项目根目录，项目目录中包含`package.json`才是根目录，可以输入`dir`查看当前目录结构。


6、最后我们输入`npm run dev`启动项目，出现如下界面：


![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-83zniwev-1627871421745)(Vue实战笔记（三）.assets/image-20210722212849013.png)]](https://img-blog.csdnimg.cn/a20796d293d24a1c9bf6421a37954341.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)


说明项目成功运行！！！输入http://localhost:8080 ，打开浏览器查看一下，出现默认界面。



> 
> main.js 项目中主入口
> 
> 
>

//引入vue.js
import Vue from ‘vue’
//引入app.vue 组件
import App from ‘./App’
//引入router目录中 /index.js
import router from ‘./router’

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: ‘#app’, //指定vue实例作用范围
router,
components: { App },
template: ‘’
})


#### 19.4、开发vue cli项目(一)


**1、Student组件**

template>


**4、index.js**

import Vue from ‘vue’
import Router from ‘vue-router’
//@ 代表src目录
import HelloWorld from ‘@/components/HelloWorld’
import User from ‘@/components/User’
import Student from “…/components/Student”;
Vue.use(Router)

export default new Router({
routes: [
{
path: ‘/’,
name: ‘HelloWorld’,
component: HelloWorld
},
{
path: ‘/user’,
name: ‘user’,
component: User
},{
path: ‘/student’,
name: ‘student’,
component: Student
}
]
})


启动项目测试一下：




#### react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

>**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/81ef0a9695ff665a48db16579c2c3b50.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/fa7b18a25053fb687586f6e27894f252.webp?x-oss-process=image/format,png)

lt new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/user',
      name: 'user',
      component: User
    },{
      path: '/student',
      name: 'student',
      component: Student
    }
  ]
})

启动项目测试一下：

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-maiYezci-1715218315733)]

[外链图片转存中…(img-kG99gVg7-1715218315733)]

2401_84434331

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【万字长文】 Vue全家桶从入门到实战，超详细笔记整理 ( 三 ) （建议收藏）_vue(1)

展示路由* template：HTML 代码模板，会替换 < App /> 中的内容* export default{…}：导出 NodeJS 对象，作用是可以通过 import 关键字导入+ name: ‘App’：定义组件的名称+ components: { HelloWorld }：定义子组件* 在hello,Vue中,关于 < style scoped> 的说明：CSS 样式仅在当前组件有效，声明了样式的作用域,是当前的界面私有的!不加代表全局有效。> index.js 配置路由。
复制链接

扫一扫