Vue学习

注意：以下在cmd中执行的都必须以管理员运行，否则可能会出现未知错误！！！

1、搭建vue环境

1.1、下载nodejs

官网：http://nodejs.cn/

下载后，无脑下一步即可。安装完成后，打开cmd查看版本信息，如下图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cul4bvsR-1621177465374)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210516212038128.png)]

1.2、安装Node.js淘宝镜像加速器

# -g 全局安装
npm install cnpm -g

# 或在每次安装的时候使用如下语句解决npm虚度慢的问题
npm install --registry=https://registry.npm.taobao.org

安装的目录：C:\Users\Administrator\AppData\Roaming\npm

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kgX4sqOC-1621177465378)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210516212802822.png)]

1.3、安装vue-cli

cnpm install vue-cli -g

npm install vue-cli -g

# 测试是否可以安装成功
# 查看可以基于那些模板创建vue应用程序，通常我们选择webpack
vue list

2、第一个vue-cli应用程序

2.1、创建一个Vue项目

随便新建一个空的文件夹在电脑上，即可

E:\mycode\myvue

2.2、创建一个基于webpack模板的vue应用程序

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

为了让我们手动执行，所以一路选择no即可！

创建完成以后，会在myvue文件夹下生成好多文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bcrmRZIp-1621177465381)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210516213438189.png)]

config：配置文件存放目录，index.js 文件为主配置文件

node_modules：项目模块的存放目录

src：源代码的存放目录

static：静态资源存放目录

package.json：该文件代表本项目所依赖的模块，初始化完成以后需要执行npm install来执行安装，它所读取的配置文件就是这个文件！我们可以根据自己运行环境来修改该文件中模块的版本号

2.3、初始化并运行

cd myvue

# 执行安装模块，读取的是package.json文件
npm install 

# 启动项目
npm run dev 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6LbbUTMf-1621177465384)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210516213927628.png)]

启动 如果没有报错，则会显示如上图！

3、什么是Webpack

本质上，webpack是一个现代化JavaScript应用程序的静态模块打包器。当webpack处理应用程序时，他会递归的构建一个依赖关系题，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个活多个bundle。

Webpack是当下对热门的前端资源模块话管理和打包工具，他可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。它还可以将按需加载的模块进行代码分离，等到实际需要再异步加载。

4、CommonsJS

服务端 的NodeJs遵循CommonsJs规范，该规范核心思想是允许模块通过require方法来同步加载所需依赖的其他模块，然后通过exports或module.exports来导出需要暴露的接口。

require("module");
require("../module.js")
export.doStuff = function(){};
module.exports = someValue;

优点：

• 服务端模块便于重用
• NPM中已经有了超过45万个可以使用的模块包
• 简单易用

缺点：

• 同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的
• 不能非阻塞的并行加载多个模块

实现：

• 服务端的NodeJS
• Browserify，浏览器段的CommonsJS实现，可以使用NPM模块，但是编译打包后的文件体积较大
• modules-webpack，类似Browserify，但是不如Browserify灵活
• wreq，Browserify的前身

5、安装webpack

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

安装：

npm install webpack -g

npm install webpack-cli -g 

测试是否安装成功：

• webpack -v
• webpack-cli -v

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ozFSHHcA-1621177465386)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210516220805392.png)]

配置：

创建webpack.config.js配置文件

• entry :：入口文件，指定Webpack用哪个文件作为项目入口
• output：输出，指定Webpack把处理完成的文件放置到指定的路径
• module：模块，用于处理各类型的文件
• plugins：插件，如：热更新，代码重用等
• resolve：设置路径指向
• watch：监听，用于设置文件改动后直接打包

module.export={
	entry:"",
	output: {
        path:"",
        filename:""
	},
	module:{loaders:[{test:/\.js$/,loader:""}]},
	plugins:{},
	resolve:{},
	watch:true
}

直接运行 webpack命令打包

6、使用webpack

1、创建项目

​ 在本地创建一个空的文件夹即可

2、创建一个名为modules的目录，用于放置js模块相关代码

export.sayHi = function(){
	document.write('<p>
        Hello Webpack
</p>')
}

3、在moudules下创建一个名为main.js的入口文件，用于打包设置entry属性

// require导入一个模块，就可以调用这个模块中的方法了
var hello = require('./hello')
hello.sayHi();

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

module.exports = {
    entry: './modules/main.js',
    output: {
        filename: ".js/bundle.js"
    }
};

5、进入项目目录，执行webpack命令即可打包

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ZBAkGtD-1621177465387)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210516222444696.png)]

执行完毕以后，可以看到输出的目录自己创建了，目录中是一个js文件，打开js文件后，是将es6 改成es5的格式，使用浏览器打开，发现还是我们写的内容！

7、使用vue-route

安装：

​ 基于第一个vue-cli进行测试学习，先看node_modules中是否存在vue-route

vue-router是一个插件包，所以我们还是需要npm/cnpm来进行安装

npm install vue-router --save-dev

如果在一个模块化工程中使用它，必须要通过Vue.use()明确的安装路由功能！！！

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

ue-router是一个插件包，所以我们还是需要npm/cnpm来进行安装

npm install vue-router --save-dev

如果在一个模块化工程中使用它，必须要通过Vue.use()明确的安装路由功能！！！

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);