vue学习

巡山小钻风つ

已于 2022-04-18 21:38:09 修改

阅读量1.1k

点赞数 1

分类专栏：笔记文章标签： vue intellij-idea

于 2022-04-09 16:24:29 首次发布

本文链接：https://blog.csdn.net/qq_51497041/article/details/124063026

版权

笔记专栏收录该内容

39 篇文章 2 订阅

订阅专栏

vue介绍

生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue 的实例。

执行流程

创建使用

创建空文件夹，用IJ打开

下载插件

创建html导入vue

---vue---
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

---axios---
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

问题：

文件右键不能出来vue的话，新建文件后缀改为.vue,再此右键就有了

需要创建命名空间声明

Alt+Enter

MVVM

流程控制：

介绍mvvm：

MVVM收拾和MVC模式一样，主要目的是分离视图（View）和模型（Model）

低耦合：

视图 (View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View 上，当View变化的时候Model可以不变，当Model变化的E候View 也可以不变。

可复用：

·你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。·

独立开发：

开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于面设计。

可测试：

界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

七八七：

vue七个常用属性：

el属性

用来指示vue编译器从什么地方开始解析vue的语法，可以说是一个占位符。.

data属性

用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。

template属性

用来设置模板，会替换页面元素，包括占位符

methods属性

放置页面中的业务逻辑,,js方法一般都放置在methods中

render属性

创建真正的Virtual Dom

computed属性

用来计算.

watch属性

watch:function(new,old){}
监听data中数据的变化
两个参数，一个返回新值,一个返回旧值

七个指令：

v-：前缀为v- 的都为指令

v-bind：绑定数据和元素属性

v-on: 绑定事件

v-model:双向绑定

网络通信Axios:

JavaSpript版本得是6

Axios是一个开源的可以用在浏览器端和 Nodes的异步通信框架，她的主要作用就是实现 AJAX异步通信，其功能特点如下:

从浏览器中创建 XMLHttpRequests
从node.js 创建http请求
支持Promise API[JS中链式编程]
拦截请求和响应
转换请求数据和响应数据取消请求
自动转换JSON数据
客户端支持防御XSRF(跨站请求伪造)

计算属性

计算出来的结果，保存在属性中~，内存中运行：虚拟Dom

自定义事件

……

第一个vue-cli项目

什么是vue-cli

vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板;
预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速;

主要功能：

统一项目结构
本地调试
热部署
单元测试
集成打包上线

需要环境：

Node.js: http://nodejs.cn/download/

安装就无脑下一步就好安装在自己的环境目录下

Git： https://git-scm.com/downloads

镜像：https://npm.taobao.org/mirrors/git-for-windows/

确认nodejs安装成功：

cmd下输入 node -v 查看是否打印版本号

cmd下输入 npm -v 查看是否打印版本号

npm就是一个软件包管理器工具，就和liinux下的apt软件差不多

安装Node.js淘宝镜像加速器（cnpm）（这样快）

# -g 全局安装

npm Install cnpm -g

# 或着使用如下语句解决 npm速度慢的问题

npm install --registry=https:// registry.npm.taobao.org

安装速度慢

cnpm安装的位置：C:/Users/Administrator/AppData/Roaming/npm

安装vue-cli

执行：cnpm install vue-cli -g

检测是否安装成功

查看可以基于那些模板创建vue应用程序，通常我们选择webpack

vue list

问题：

补充：这里会遇到操作系统不允许运行脚本，需要更换执行策略，查看此方法

参数

MachinePolicy

        由组策略计算机的所有用户设置。

UserPolicy

        由组策略当前用户的设置。

Process

        范围 Process 仅影响当前 PowerShell 会话。执行策略保存在环境变量中 $env:PSExecutionPolicyPreference，而不是注册表中。关闭 PowerShell 会话后，将删除变量和值。

CurrentUser

        执行策略仅影响当前用户。它存储在注册表 HKEY_CURRENT_USER项中 。

LocalMachine

        执行策略会影响当前计算机上所有用户。它存储在注表 HKEY_LOCAL_MACHINE项中 。

您可以使用 " 打开脚本执行 组策略" 设置来管理企业中的计算机的执行策略。组策略设置将替代在所有作用域中在 PowerShell 中设置的执行策略。

" 打开脚本执行 " 策略设置如下所示：

如果禁用 " 启用脚本执行"，脚本将不会运行。这等效 Restricted 于执行策略。

如果启用 "启用 脚本执行"，则可以选择执行策略。组策略设置等效于以下执行策略设置：

组策略执行策略
允许所有脚本 Unrestricted
允许本地脚本和远程签名的脚本 RemoteSigned
仅允许签名脚本 AllSigned

如果未配置 " 启用脚本执行 "，则它不起作用。在 PowerShell 中设置的执行策略是有效的。

组策略	执行策略
允许所有脚本	Unrestricted
允许本地脚本和远程签名的脚本	RemoteSigned
仅允许签名脚本	AllSigned

执行代码：
Set-ExecutionPolicy -ExecutionPolicy 参数
默认参数是Restricted
这次配置的参数是RemoteSigned

第一个vue-cli应用程序

创建一个vue项目，随后建立一个空文件夹（管理员cmd进入创建的文件夹，输入下面命令）
创建一个基于webpack模板的vue应用程序

#这里的myvue 是项目名称，可以根据自己的需求起名

vue init webpack myvue

一路选no即可

选项说明：

Project name：项目名称，默认回车即可
Project description：项目描述，默认回车即可
Author：项目作者，默认回车即可
Install vue-router：是否安装vue-router，选择n不安装（后期需要手动添加）
Use ESLInt to lint your code:是否使用ESLint做代码检查，选择 no 不安装（后期需要再手动添加）
Set up unit tests：单元测试相关，选择no不安装（后期需要再手动添加）
Setup e2e tests with Nightwatch ：单元测试相关，选择no不安装（后期需要再手动添加）
Should we run npm install for you after the project has been created : 创建完成后直接初始化，选择no，手动执行；运行结果！

初始化并运行

cd myvue

npm install 安装依赖环境（如果有错误，按照提示输入代码修复）

npm run dev

错误：

运行 npm audit fix 运行完显示上面问题但问题也解决。

使用IJ打开

如果终端无法运行：是权限问题则按以下步骤：

属性——》兼容性——》勾选以管理员身份运行：

安装Webpack

介绍：

Webpack是一款模块加载器兼打包工具，它能把各种资源，如js、jx、es6、sass、less、图片等都作为模块来处理和使用.

安装：

npm install webpack -g

npm install webpack-cli -g

安装成功检测：

webpack -v

webpack-cli -v

配置：

使用webpack

1. 使用项目

2. 创建一个名为 modules 的目录，用于放置JS模块等资源文件

3. 在modules下创建模块文件，如hello.js,用于编写JS模块相关代码

//暴露一个方法：sayHi

exports.sayHi = function(){

document.write("<div>hello webpack<div>");

}

4. 在modules 下创建一个名为main.js的入口文件，用于打包时设置entry属性。

//require 导入一个模块，就可以调用这个模块中的方法了

var hello = require("./hello");

hello.sayHi();

5. 在项目目录下创建 webpack.config.js配置文件，使用webpack命令打包

module.exports = {

entry: "./modules/main.js",

output:{

filename:"./js/bundle.js"

}

};

6. 终端输入webpack打包

生成包可以直接引用

错误：

no such file or directory, open 'D:\IJ_soft\vue\myvue\package.json'

自己项目里面有子项目，运行的npm run dev 没在自己的子项目里运行，只要cd到子项目然后运行npm run dev即可

vue+elementUI

完整安装（汇总）：

注意：命令行都要使用管理员模式运行

创建一个名为 vue_element_ui的工程， vue init webpack vue_element_ui
安装依赖，我们需要安装 vue-router element-ui sass-loder 和node-sass 四个插件

（没报error就是装好了）

# 进入目录工程目录

cd vue_element_ui

# 安装 vue-router

npm install vue-router --save-dev (不行就装@3.1.3，vue-router@3.1.3)

# 安装element-ui

npm i element-ui -S

# 安装依赖

npm install

# 安装 SASS 加载器

cnpm install sass-loader node-sass --save-dev

#启动测试

npm run dev

npm命令解释：

npm install moduleName:安装模块项目目录下
npm instaall -g moduleNaame: -g的意思是将模块安装到全局，具体安排到磁盘哪个位置，要看 npm config -g prefix 的位置
npm install -save moduleName: --save 的意思是将模块安装到项目目录下，并在package文件的 dependencies 节点写入依赖，-S为该命令的缩写
npm install -save-dev moduleName: --save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

说明：

assets：用于存放资源文件
components：用于存放Vue功能组件
views：用于存放Vue视图组件
router：用于存放vue-router配置

错误：

Module build failed: TypeError: this.getResolve is not a function
at Object.loader(F:\班级管理\西开【19525】\2、代码\wuehello-vue [node_ modulesl_sass-loadera8.0.0@sass-loader/dist\index. js:52:25)

这个原因是sass版本太高，

解决：

打开package.json文件找到sass-loader修改版本，在终端运行 npm install（这里使用了 7.3.1）

This relative module was not found:

* ./components/HelloWorld in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue

原因：

自己删了对应代码缺没删导入包的代码导致错误（导入了不存在的文件）

error in ./src/views/Login.vue

Module build failed: Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.

原因：

如果出现错误: 可能是因为sass-loader的版本过高导致的编译错误，可以去package.json文件中把sass-loder的版本降低，也有可能是node-sass版本过高，看报错内容修改相应的版本

解决：降低版本

路由嵌套：

export default new Router({
  routes:[
    {
      path:'/main',
      component:Main,//嵌套路由
      children:[
        {path:'/user/profile',component:UserProfile},
        {path:"/user/List",component:UserList},
      ]
    },{
      path:'/login',
      component:Login
    }
  ]
});