Vue简介

Vue web前端三大主流框架之一,是一套用于构建用户界面的渐进式框架。
Vue 的目标在于简化Web开发。
Vue自身只聚焦于视图层,因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时 ,Vue也完全有能力地驱动复杂的单页应用。

Vue安装方式

有三种方式:独立版本、CDN方法、NPM方法
推荐使用最后一种,在用Vue.js构建大型应用的时候推荐使用NPM安装方法,NPM能很好的和诸如Webpack或者Browserify 模块打包器配合使用,同时 Vue 也提供配套工具来开发单文件组件。

1、独立版本

可以在 Vue.js 的官网上直接下载 vue.min.js 并用

2、CDN方法

对于制作原型或学习,可以这样使用最新版本:

对于生产环境,官网推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏:

3、NPM(推荐)

在开始安装之前,我们需要了解什么是node.js、npm、cnpm和vue-cli

  • Node.js 是运行在服务端的 JavaScript,是一个基于Chrome V8引擎的JavaScript运行环境。
  • npm(node package manager):nodejs的包管理器,用于node插件管理,例如安装、卸载、管理依赖等。
  • cnpm:因为npm使用的是国外的服务器下载,网络很不稳,会出现异常,淘宝团队就将npm官网的插件都同步到了在中国的服务器,这样可以让我们从这个服务器上稳定下载资源。
  • vue-cli是一个基于 Vue.js 进行快速开发的完整系统, cli是Command-Line Interface,即命令行界面,也叫脚手架。 vue cli 是vue.js官方发布的一个vue.js项目的脚手架。 使用vue-cli可以快速搭建vue开发环境和对应的webpack配置。

npm安装

1、安装node

官网下载一个版本,
不推荐最新版,我自己是在node中文网下载的14.18.1版本
http://nodejs.cn/vue需要Python环境吗 vue需要下载吗_node.js下载完成之后,一直下一步:
vue需要Python环境吗 vue需要下载吗_前端_02
vue需要Python环境吗 vue需要下载吗_javascript_03vue需要Python环境吗 vue需要下载吗_前端_04vue需要Python环境吗 vue需要下载吗_vue_05
vue需要Python环境吗 vue需要下载吗_javascript_06vue需要Python环境吗 vue需要下载吗_vue需要Python环境吗_07
安装好之后可以win+R 查看一下:
vue需要Python环境吗 vue需要下载吗_javascript_08输入

node -v

查看一下node版本

vue需要Python环境吗 vue需要下载吗_javascript_09

2、安装vue-cli

安装好node,我们就可以来安装vue-cli,在这里我们有三种方式:

第一种方式:用npm安装:

npm install -g @vue/cli

vue需要Python环境吗 vue需要下载吗_javascript_10


第二种方式:cnpm安装:

先下载淘宝镜像:

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

vue需要Python环境吗 vue需要下载吗_node.js_11

然后用cnpm安装vue-cli

cnpm install -g @vue/cli

vue需要Python环境吗 vue需要下载吗_node.js_12


第三种方式:(推荐)用yarn安装:

  • yarn是经过重新设计的npm客户端,于2016年10月发布,相比于npm,yarn在运行速度上有显著的提升,安装时间变少,功能上也有很多改进。

先安装yarn

npm install -g yarn

vue需要Python环境吗 vue需要下载吗_node.js_13


就可以使用yarn下载vue-cli了

vue需要Python环境吗 vue需要下载吗_前端_14


拓展:可以再将yarn设置为淘宝镜像,这样速度更快:

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

vue需要Python环境吗 vue需要下载吗_node.js_15

3、创建vue项目

安装好vue-cli了,接下来就可以创建项目啦。
自己定义项目名,不可使用驼峰式命名)

vue create project-name

回车之后会被提示选取一个 preset。可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。

vue需要Python环境吗 vue需要下载吗_前端_16


我一般选择的就是默认的

vue需要Python环境吗 vue需要下载吗_node.js_17


安装完成后

cd firstvue

vue需要Python环境吗 vue需要下载吗_vue_18

进入之后启动项目就可以了,使用npm或者yarn都可:

npm run serve

vue需要Python环境吗 vue需要下载吗_javascript_19

yarn serve

vue需要Python环境吗 vue需要下载吗_vue_20


复制网址打开即可:

vue需要Python环境吗 vue需要下载吗_javascript_21