Vue简单入门及使用(一)---环境搭建及项目创建

最新推荐文章于 2024-07-20 05:46:23 发布

Nirvana_lss

最新推荐文章于 2024-07-20 05:46:23 发布

阅读量1.5k

点赞数 2

分类专栏： Vue 文章标签： node.js vue.js javascript npm

本文链接：https://blog.csdn.net/nirvana_lss/article/details/106624981

版权

Vue 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

Vue简单入门及使用（一）---环境搭建及项目创建

前言：做一个有梦想的程序猿！

Vue是什么？

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，是现在比较流行的一种前后端分离框架，基于MVVM（Model-View-ViewModel）模式，Model是后端交互的数据，View是展示的页面，ViewModel把View和Model连接起来的桥梁，支持数据的双向绑定，保证页面和数据的一致性。
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

Vue安装

Vue使用主要有两种方式，实战开发中推荐使用第二种
1、我们可以在 Vue.js 的官网上直接下载 vue.min.js 并直接在html中用 < script >标签引入。这样子不利于组件/代码的封装复用。
2、在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和webpack模块打包器配合使用。Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。本系列都是基于Vue CLI搭建的，Vue CLI 的文档地址https://cli.vuejs.org/zh/。

Node.js环境搭建

使用npm安装vue需要配置node.js环境，node.js下载地址https://nodejs.org/en/，直接下载安装最新稳定版即可。

下载好node.js之后直接双击，一直点下一步就行了，安装好node，在命令行输入
node -v

查看node是否安装好并配置好环境变量
在这里插入图片描述
如果成功输出node版本，则说明已经安装，否则需要在系统环境变量中配置node的安装路径。
安装好node.js之后，就自动安装了npm，可以在命令行输入
npm -v

查看npm版本号

cnpm安装（淘宝 NPM 镜像）
大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm
全局安装cnpm

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

这样就可以使用 cnpm 命令来安装模块了：
cnpm install [name]

npm全局安装Vue CLI

命令行输入
npm install -g @vue/cli
安装完成之后可输入
vue --version
查看vue cli版本
在这里插入图片描述

vue cli3跟vue cli2构建出来的项目目录结构不同，如果需要使用vue cli2可以全局安装一个桥接工具，这里主要介绍vue cli2的安装及使用，vue cli3的安装大同小异，所以在此不再介绍。

npm install -g @vue/cli-init

vue cli3创建项目命令：
vue create 项目名称

vue cli2创建项目命令：
vue init webpack 项目名称

集成开发工具Vs Code安装

VS Code（Visual Studio Code）是由微软研发的一款免费、开源的跨平台文本（代码）编辑器。支持多种语言JAVA、PY、C、C++、C#、Html。现在我们主要用来开发前端。
为什么使用vs code开发前端
1、轻量级，只有几十兆
2、有许多前端开发提升开发效率的插件。
官网地址：https://code.visualstudio.com/
安装好vs code之后，推荐安装一下插件：

Auto Close Tag （html标签自动闭合）
Auto Rename Tag （html标签自动重命名）
Beautify （格式化代码）
Chinese (Simplified) Language Pack for Visual Studio Code （必装，简体中文语言包）
ESLint （必装，代码格式校验）
GitLens — Git supercharged （必装，git版本管理）
Vetur （必装，使vs code支持vue）
VueHelper （必装，vue代码提示）

插件安装需要自行在vs code搜索安装
在这里插入图片描述