Vue环境搭建_vju-CSDN博客

本文为CSDN博主「王林」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

本文链接：https://blog.csdn.net/qq_45912025/article/details/120098203

Vue环境搭建

一、Vue概述

Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。
与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。
Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合。

二、前端知识体系

三要素

HTML (结构) :超文本标记语言(Hyper Text Markup Language) ，决定网页的结构和内容
CSS (表现) 层叠样式表(Cascading Style sheets) ，设定网页的表现样式
JavaScript (行为)是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行, 用于控制网页的行为

结构层（HTML）

略

表现层（CSS）

CSS层叠样式表是一门标记语言,并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下:

语法不够强大，比如无法嵌套书写，导致模块化开发中需要写很多重复的选择器;
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护;
这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为[CSS预处理器]的工具，提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率。（例如页面在不同的时候有不同的需求，淘宝在双11和618的样式就会不一样）

CSS预处理器

通俗易懂的话来说就是“用一种专门的编程语言,进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”
常用的CSS预处理器有:

SASS:基于Ruby,通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。
LESS:基于NodeJS,通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS,但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用LESS。

三、JavaScript框架

前端三大框架：Angular、React、Vue

jQuery:大家熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7、8;
Angular: Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发;对后台程序员友好，对前端程序员不太友好;最大的缺点是版本迭代不合理(如: 1代-> 2代，除了名字，基本就是两个东西;截止发表博客时已推出了Angular6)React: Facebook出品，一款高性能的JS前端框架;特点是提出了新概念[虚拟DOM]用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率;缺点是使用复杂，因为需要额外学习一门[JSX] 语言;
Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点;
Axios :前端通信框架;因为Vue 的边界很明确，就是为了处理DOM,所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery提供的AJAX通信功能;

四、UI框架

Ant-Design:阿里巴巴出品，基于React的UI框架
ElementUI、 iview、 ice: 饿了么出品，基于Vue的UI框架
Bootstrap: Twitter推出的一个用于前端开发的开源工具包
AmazeUI:又叫"妹子UI"，一款HTML5跨屏前端框架.

JavaScript 构建工具

Babel: JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
WebPack: 模块打包器，主要作用是打包、压缩、合并及按序加载
注：以上知识点将WebApp开发所需技能全部梳理完毕

五、搭建Vue环境

1、下载nodejs（需要用到里面的npm包管理器）

因为vue需要用到npm包管理工具，所以先下载nodejs确保有npm。
mac可以用brew包管理工具去下载nodejs，brew跟linux里的yum差不多，下载东西很方便。也可以直接去nodejs的官网去下载nodejs。

安装nodejs后可以测试是否安装成功：

npm -V #查看npm版本
node -V #查看nodejs版本
用npm下载包很慢（亲测！！！真的慢！）可以换成淘宝的镜像，相对应地是cnpm命令，用法和npm一样

在这里插入图片描述

用淘宝的镜像安装

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

2、安装webpack

webpack是当前前端最热门的前端资源模块化管理和打包工具
webpack官网

cnpm install webpack -g
cnpm install webpack-cli -g

在这里插入图片描述

3、安装vue脚手架（vue-cli）

cnpm install vue-cli -g
vue -list 查看可以基于哪些模板创建vue 应用程序，通常我们选择 webpack

六、yarn的安装和使用

yarn的简介：

Yarn是facebook发布的一款取代npm的包管理工具。

yarn的特点：

速度超快。
- Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。同时利用并行下载以最大化资源利用率，因此安装速度更快。
超级安全。
- 在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。
超级可靠。
- 使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。

yarn的安装:

下载node.js，使用npm安装

npm install -g yarn
查看版本：yarn --version

安装node.js,下载yarn的安装程序:

提供一个.msi文件，在运行时将引导您在Windows上安装Yarn

Yarn 淘宝源安装，分别复制粘贴以下代码行到黑窗口运行即可

yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

yarn的常用命令：

安装yarn

npm install -g yarn
安装成功后，查看版本号：

yarn --version
创建文件夹 yarn

md yarn
进入yarn文件夹

cd yarn
初始化项目

yarn init // 同npm init，执行输入信息后，会生成package.json文件
yarn的配置项：

yarn config list // 显示所有配置项
yarn config get <key> //显示某配置项
yarn config delete <key> //删除某配置项
yarn config set <key> <value> [-g|--global] //设置配置项

安装包：

yarn install //安装package.json里所有包，并将包及它的所有依赖项保存进yarn.lock
yarn install --flat //安装一个包的单一版本
yarn install --force //强制重新下载所有包
yarn install --production //只安装dependencies里的包
yarn install --no-lockfile //不读取或生成yarn.lock
yarn install --pure-lockfile //不生成yarn.lock
添加包（会更新package.json和yarn.lock）：


yarn add [package] // 在当前的项目中添加一个依赖包，会自动更新到package.json和yarn.lock文件中
yarn add [package]@[version] // 安装指定版本，这里指的是主要版本，如果需要精确到小版本，使用-E参数
yarn add [package]@[tag] // 安装某个tag（比如beta,next或者latest）
//不指定依赖类型默认安装到dependencies里，你也可以指定依赖类型：

yarn add --dev/-D // 加到 devDependencies
yarn add --peer/-P // 加到 peerDependencies
yarn add --optional/-O // 加到 optionalDependencies
//默认安装包的主要版本里的最新版本，下面两个命令可以指定版本：

yarn add --exact/-E // 安装包的精确版本。例如yarn add foo@1.2.3会接受1.9.1版，但是yarn add foo@1.2.3 --exact只会接受1.2.3版
yarn add --tilde/-T // 安装包的次要版本里的最新版。例如yarn add foo@1.2.3 --tilde会接受1.2.9，但不接受1.3.0
发布包

yarn publish
移除一个包

yarn remove <packageName>：移除一个包，会自动更新package.json和yarn.lock
更新一个依赖

yarn upgrade 用于更新包到基于规范范围的最新版本
运行脚本

yarn run 用来执行在 package.json 中 scripts 属性下定义的脚本
显示某个包的信息

yarn info <packageName> 可以用来查看某个模块的最新版本信息
缓存

yarn cache
yarn cache list # 列出已缓存的每个包 yarn cache dir # 返回 全局缓存位置 yarn cache clean # 清除缓存