1,Visual Studio Code
下载地址:
2,Node JS
Node JS提供的NPM依赖管理和编译打包工具使用起来非常方便,对于前端比较大型一些的项目还是采用NPM作为打包工具比较理想。要使用NPM,就需要安装NodeJS,下载地址为,
下载地址:/download/
升级命令:
sudo npm install npm -g
3,安装webpack
安装好npm之后,就可以通过npm命令来下载各种工具了。安装打包工具webpack,-g表示全局安装,
npm install webpack -g
4,安装vue-cli
安装vue脚手架项目初始化工具vue-cli,-g表示全局安装,
npm install vue-cli -g
5,使用淘宝镜像加速
因为NPM使用的是国外中央仓库,国内下载速度较慢,推荐使用国内镜像,比如淘宝镜像。
安装淘宝镜像,安装成功后用cnpm代替npm命令即可,
npm install -g cnpm --registry=https://registry.
6,安装Yarn
Yarn是Facebook发布的node.js包管理器,比npm更快、更高效,可以使用Yarn代替npm。
npm i yarn -g -verbose
设置淘宝镜像
yarn config set registry https://registry.
使用Yarn跟NPM差别不大,具体命令关系如下:
npm install => yarn installnpm install --save [package] => yarn add [package]npm install --save-dev [package] => yarn add [package] --devnpm install --global [package] => yarn global add [package]npm uninstall --save [package] => yarn remove [package]npm uninstall --save-dev [package] => yarn remove [package]
7,安装Element
Element是国内饿了么公司提供的一套开源前端框架,简洁优雅,提供了Vue、React、Angular等多个版本。
yarn global add element-uioryarn add element-ui
8,安装SCSS
可以用SCSS编写页面样式
yarn add sass-loader node-sass -dev
9,安装axios
axios是一个基于Promise用于浏览器和Node.js的HTTP客户端,用来发送HTTP请求。
yarn add axios
10,安装Mock.js
为了模拟后台接口提供页面需要的数据,引入Mock.js为我们提供模拟数据,而不用依赖于后台接口的完成。
yarn add mockjs -dev
11,安装js-cookie
可以使用Cookie获取token
yarn add js-cookie
12,安装Font Awesome
Font Awesome提供了675个可缩放的矢量图标,可以使用CSS所提供的所有特性对它们进行更改,包括大小、颜色、阴影或者其他任何支持的效果。
yarn add font-awesome
13,安装多语言国际化支持
yarn add vue-i18n
14,安装管理应用状态支持
vuex是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所用组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
yarn add vuex
结尾!
如果觉得《搭建前端开发环境(nodejs npm yarn webpack vue element)》对你有帮助,请点赞、收藏,并留下你的观点哦!