2021-12-19 Vue前端开发环境搭建

一、开发环境的下载

1.Node JS 

NodeJS在菜鸟教程上的安装步骤

在cmd可以看到npm的版本信息就可以了

2.webpack

npm install webpack -g

webpack在菜鸟教程上的安装步骤

3.安装vue-cli

安装vue脚手架项目初始化工具vue-cli，-g表示全局安装

npm install vue-cli -g

4.安装淘宝镜像

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

安装成功后用cnpm代替npm 例如：cnpm install webpack -g

5.安装Yarn

npm i yarn -g -verbose

Yarn是FaceBook发布的node.js管理器，比npm更快、更高效

可以用Yarn代替npm

安装完Yarn之后执行如下指令，就可以像使用npm一样使用Yarn了

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

npm和yarn具体命令关系：
npm insatll    =>    yarn install

npm install --save [package]    =>    yarn add [package] 

npm install --save-dev [package]    =>    yarn add [package] --dev

npm install --global [package]     =>    yarn global add [package]

npm uninstall --save [package]    =>    yarn remove [package]

npm uninstall --save-dev [package]    =>    yarn remove [package]

6.查看全局安装的包

npm list -g --depth 0

二、创建项目

1.生成项目

vue init webpack [项目名]

2.安装依赖

cd [项目名]

yarn install

依赖包安装完成之后会在项目的根目录下生成node_modules文件夹，就是下载的依赖包的统一存放目录

3.启动运行

npm run dev

4.导包到VSCode 添加文件夹到工作区即可，新建终端可以打开终端命令窗口

三、其他依赖的安装

1.安装Element

npm i element-ui -S

=>yarn add element-ui

在main.js引入Element

验证一下

 

 

 说明Element组件已经成功引入了

2.安装Scss

npm install scss-loader node-sass -dev

=>yarn add scss-loader node-sass -dev

3.安装axios

npm install axios

=> yarn add axios

4.使用第三方图标库

npm install font-awesome

=>yarn add font-awesome

在main.js引入依赖

import 'font-awesome/css/font-awesome.min.css'

5.多语言国际化

npm install vue-il8n

=>yarn add vue-il8n