VUE前端开发环境搭建

1.Node.js下载并安装

1.地址：https://nodejs.org/zh-cn/   

2.下载后直接正常选择目录安装
3.检查node js版本 node -v

4.检查NPM版本号 npm -v

5.切换淘宝NPM库 npm config set registry https://registry.npm.taobao.org
6.检查镜像配置是否生效 npm config list

7.安装VUE和客户端 npm install -g @vue/cli --force 等待安装完成即可 检测是否安装成功 vue --version

注：如果安装过程报错可执行卸载命令 npm uninstall -g @vue/cli 之后重新安装

2. 初始化VUE项目

2.1 初始化UI工程

命令：vue ui 会自动打开管理界面 http://localhost:8000，如果为打开可直接访问该地址

默认没有项目

2.2 创建VUE项目

点击修改路径，将你需要放置项目的路径（最好英文不要出现中文或者特殊符号）复制粘贴后按回车键 一定要进入该目录下创建，否则项目的目录未改变，切换后可观察下面的文件是否当前目录的文件

目录切换后点击下方的创建按钮

2.3 项目详情

输入项目名称（最好用英文），初始化仓库根据自己需要选择是否勾选，点击下一步

2.4 项目预设

第一次选手动，当项目创建成功时可以保存预设，后续创建项目时可使用之前的预设

2.5 选择功能

2.6 项目配置

选择ESLint+ StandardConfig

2.7 保存预设

创建完成后会询问是否保存预设，保存后可在前面2.4步骤设置预设时挑选使用

2.8 创建后效果

gongle浏览器有自动翻译功能，也可能显示的是英文

3 初始化项目

根据自己实际需要安装

3.1 安装插件

安装vue-cli-plugin-element 插件


安装成功之后会提示配置插件 选择手动导入

安装成功后可查看

3.2 安装依赖

3.2.1 安装运行依赖

1.axios依赖

2.富文本编辑器vue-quill-editor

3.echars插件

3.2.2 安装开发依赖

安装开发依赖时需要注意切换依赖方式
1.开发依赖 less

2.开发依赖 less-loader

安装完成后可在依赖菜单页面查看安装成功的依赖

3.3 关闭ESLint校验

4 编译启动项目

1.选择任务，选择serve，点击运行

2.编译成功，启动APP

3.出现如下页面即安装成功