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组件