vue3.0+vue-router4.0+element-plus项目搭建---脚手架cli搭建

前言

网上翻了好多，都无法成功搭建，要不路由不能用。四处碰壁后，终于学会了。

环境，我用vscode。其它IDE或者文件夹就能创建。

• 先安装好node.js与vue cli

node 安装

1. node.js 安装：https://nodejs.org/zh-cn/
   
2. 命令窗口输入node --version查看版本。
   
3. npm 是node内置的资源管理器。可以把npm换成cnpm来提升下载速度。cnpm是淘宝的
   npm 镜像：
   淘宝npm镜像
   registry地址：http://registry.npm.taobao.org/
   cnpmjs镜像
   registry地址：http://registry.cnpmjs.org/
   设置镜像源：npm config set registry
   查看镜像源： npm config get registry

cli（脚手架安装）

npm install -g @vue/cli
脚手架是一个基于 Vue.js 进行快速开发的完整系统,通过@vue/cli 实现快速搭建标准化项目的脚手架

1.建立脚手架项目

图形界面配置方法见2。

1. 首先打开一个文件夹，如果没有vscode直接打开文件夹
   
2. vscode按Ctrl+~按钮，打开终端
   
   文件夹用户直接在这个窗口里输入cmd
   
3. vue create vueapp //创建一个项目vueapp是项目名，注意不能带大写。回车。
4. 选中箭头后，回车，按下面图片选择。空格是选中
   
5. 选择版本为3.X。下边这样选择。回车后等待完成。
   
6. 根据提示命令，进入到文件夹内，输入npm run serve，即可看到项目成功启动了。
   
7. 点击地址到浏览器地址栏，即可打开程序。

8. 点击Home和About可以看到地址栏路由在切换。

2.当时我的疑问，难道没有简单的方式创建？还真有

在文件夹目录处输入，vue ui直接打开图形界面，一顿配置就完事。

安装element-plus

如果使用官方提供的方式的，这个注册得咱们自己写

使用cli安装 vue add element-plus 这个会直接帮我们写好注册事件。


到此element-plus安装好了。增加一个普通按钮，可以看到主题的颜色发生了改变。

注意点

ps:如果运行npm run serve会报错。而且颜色也未生效。
请看：链接https://blog.csdn.net/hello_mr_anan/article/details/121167906

如果出现element-plus样式有误情况要注意。
vue add element-plus自动添加的代码中是有问题的。参考下边

后续之发送web请求

建议使用Axios
axios基础使用方法：

axios.create({config}) //创建axios实例
axios.get(url,{config}) //get请求
axios.post(url, data,{config}) //post请求
axios.interceptors.request.use() // 请求拦截器
axios.interceptors.response.use() // 请求拦截器