Vue 环境准备

近期接触了下前端项目，记录下学习过程。

近几年前端发展的迅猛，各种框架层出不穷，vue react angular ，各种第三方组件

原来会点js，jQuery 前后端一个人全搞定了，现在前后端分离，后端主要提供接口，前端主要负责交互

对于个人来说会更专注自己的业务，当然对于企业来说会多了一个人力成本。

编辑器

　　一般都使用VSCode ,下载地址 https://code.visualstudio.com/ 非常简洁，可以灵活安装一些插件。

• Vetur —— 语法高亮、智能感知、Emmet等
• EsLint—— 语法纠错
• Auto Close Tag —— 自动闭合HTML/XML标签
• Auto Rename Tag —— 自动完成另一侧标签的同步修改
• Path Intellisense —— 自动路劲补全
• HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式
• Vue 2 Snippets ——vue的语法提示

node安装

　　下载地址：http://nodejs.cn/download/

　　安装步骤很简单，只要一路“next”就可以了。

　　安装完成后，打开命令行工具输入命令node -v，如下图，如果出现对应版本号，就说明安装成功了。

　　

　　npm包管理器，是集成在node中的，所以，直接输入npm -v就会如下图所示，显示出npm的版本信息

　　

yarn 安装

　　听同事介绍说yarn比npm 快很多，也比较稳定，所以直接安装yarn

　　进入终端用npm安装yarn

npm install -g yarn

　　切换淘宝镜像（可以切换本公司的镜像）

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

　　下载项目，并启动

//下载项目
git clone git@xxxx
//安装依赖
yarn
// 启动项目
yarn serve 

项目的结构介绍

• public：存放静态文件
• src：源码文件，开发就在此目录下
• .gitignore：git的配置文件
• babel.config.js：babel的配置文件，在创建项目的时候采用的脚手架为bable
• package-lock.json：定义了依赖库的下载位置，保证了在项目迁移部署环境的一致性。
• package.json：定义了该项目依赖的类库

yarn和npm命令对比

初始化            yarn init                          npm init
安装依赖          yarn install 或者 yarn              npm install pnpm install
新增依赖          yarn add element-ui                npm install element-ui --save pnpm i element-ui
删除依赖          yarn remove element-ui             npm uninstall element-ui --save …
更新依赖          yarn upgrade                       npm update pnpm update

更多命令查看：https://yarn.bootcss.com/

这样环境基本就搭建好了。

后面有时间再说说语法。

没接触之前感觉不会用，未知领域总是觉得好厉害好高深的样子，环境搭建好，了解下基本语法基本就能上手项目了。

先迈出第一步。

相关链接：

Vue官网

eleme组件