Vue的入门以及前期准备工作

​​​

目录

​​​​​​

 一.Vue的入门开始

1.Vue的概述：

2.Vue的核心以及优点：

3.为什么要使用Vue.js?

二.安装vue.js的前期准备工作

1.vue.js的概述以及简介

2.安装vue.js之前需要再安装一些的插件

---

 

 一.Vue的入门开始

1.Vue的概述：

Vue是一套用于构建用户界面的渐进式框架。Vue被设计为可以自底向上逐层应用。

2.Vue的核心以及优点：

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router，vue-resource，vuex）或既有项目整合。

3.为什么要使用Vue.js?

• 轻量级，体积小。压缩后有只有20KB多 (Angular压KB+，React压KB+) 。
• 移动优先。更适合移动端，比如移动端的Touch事件。
• 易上手，学习曲线平稳，文档齐全。
• 吸取了Angular(模块化）和React(虚拟DOM）的长处，并拥有自己独特的功能（计算属性）。
• 开源，社区活跃度高 。

 

二.安装vue.js的前期准备工作

 

1.vue.js的概述以及简介

•  vue.js是大多数公司在进行前端网页搭建的首选，因为它体积小，功能强大，灵活度高。在市场上占有很大的使用量。
• vue.js是一种渐进式JavaScript框架，符合前后端分离开发。

2.安装vue.js之前需要再安装一些的插件

•   node.js：对谷歌V8进行了封装
•   npm淘宝镜像：使用node.js的工具
•   webpack：使用vue.js的工具
•   vue Cli脚手架：快速搭建vue工程的工具

 Node.js里面包含vue.js。

其中vue.js通过npm链接使用Node.js远程仓库。

其中vue.js通过webpack链接使用vue.js自带的强大的功能。

 

开始安装Node.js

如果Node.js还没有下载，可以前往下方的下载地址下载哟：（无脑下载即可）

https://nodejs.org/en/https://nodejs.org/en/

 

下载完毕或者之前下载过的可以在自己的电脑上进行测试：

快捷键win+R,输入cmd，打开命令提示符

输入指令node -v

如果出现下面的node版本号，证明Node.js已经安装成功啦！

 

 

开始安装 npm淘宝镜像

1.快捷键win+R ,输入cmd，打开命令提示符

输入指令：

npm install --global cnpm

 2.接着输入指令：

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

3.最后输入指令：

 npm config list

 最后出现安装的相关配置信息代表安装成功啦！

 4.想查看安装的版本号

输入指令：

npm -v

 

 

开始安装webpack

快捷键win+R,输入cmd，打开命令提示符。

输入指令：

  npm install webpack webpack-cli -g --save-dev

 检测是否安装成功？

 

安装vueCli 脚手架

快捷键win+R,输入cmd，打开命令提示符。

输入指令：（全局安装vueCli框架）

 npm install --global vue-cli

 输入指令：（查看版本号）

注意一定是大写的V哦！！！

vue -V

 

在idea中安装vue.js的插件

在插件里选择vue.js点击安装即可，安装之后需要重启一下idea,重启vue.js框架就安装成功啦！

 

 我们随机选择一个项目，右键-新建，就可以发现有了vue组件的选择啦，之后就可以开始vue的行程喽！！！

 

以上关于vue的前期准备工作就ok啦！！！