原创

安装Vue3.x环境并创建vue项目引入element plus与axios

温馨提示:
本文最后更新于 2022年11月19日,已超过 574 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我

环境准备

1、首先我们上node.js官网(https://nodejs.org/zh-cn/),下载最新的长期版本,直接运行安装完成之后,我们就已经具备了node和npm的环境了。

安装完成之后检查下版本信息:

2、接下来,安装vue的环境

# 安装淘宝npm 下载依赖速度快
npm install -g cnpm --registry=https://registry.npm.taobao.org<br/>#如果想用vue ui来创建项目,需要vue3.x的版本,vue2.x是不能用vue ui的#如果安装了vue2.x的版本,需要先卸载npm uninatall vue-cli -g
# vue-cli 安装依赖包 
cnpm install @vue/cli -g

新建项目

# 命令行输入vue ui 打开vue的可视化管理工具界面
vue ui

上面我们分别安装了淘宝npm,cnpm是为了提高我们安装依赖的速度。vue ui是@vue/cli3.0增加一个可视化项目管理工具,可以运行项目、打包项目,检查等操作。对于初学者来说,可以少记一些命令。
3、创建vueblog-vue项目

运行vue ui之后,会为我们打开一个http://localhost:8080 的页面:

然后切换到【创建】,注意创建的目录最好是和你运行vue ui同一级。这样方便管理和切换。然后点击按钮【在此创建新项目】

下一步中,项目文件夹中输入项目名称“blog-vue”,其他不用改,点击下一步,选择【手动】,再点击下一步,如图点击按钮,勾选上路由Router、状态管理Vuex,去掉js的校验。

下一步中,也选上【Use history mode for router】,点击创建项目,然后弹窗中选择按钮【创建项目,不保存预设】,就进入项目创建啦。

稍等片刻之后,项目就初始化完成了。上面的步骤中,我们创建了一个vue项目,并且安装了Router、Vuex。这样我们后面就可以直接使用。

整个vueblog-vue的项目结构

├── README.md            项目介绍
├── index.html           入口页面
├── build              构建脚本目录
│  ├── build-server.js         运行本地构建服务器,可以访问构建后的页面
│  ├── build.js            生产环境构建脚本
│  ├── dev-client.js          开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新
│  ├── dev-server.js          运行本地开发服务器
│  ├── utils.js            构建相关工具方法
│  ├── webpack.base.conf.js      wabpack基础配置
│  ├── webpack.dev.conf.js       wabpack开发环境配置
│  └── webpack.prod.conf.js      wabpack生产环境配置
├── config             项目配置
│  ├── dev.env.js           开发环境变量
│  ├── index.js            项目配置文件
│  ├── prod.env.js           生产环境变量
│  └── test.env.js           测试环境变量
├── mock              mock数据目录
│  └── hello.js
├── package.json          npm包配置文件,里面定义了项目的npm脚本,依赖包等信息
├── src               源码目录 
│  ├── main.js             入口js文件
│  ├── app.vue             根组件
│  ├── components           公共组件目录
│  │  └── title.vue
│  ├── assets             资源目录,这里的资源会被wabpack构建
│  │  └── images
│  │    └── logo.png
│  ├── routes             前端路由
│  │  └── index.js
│  ├── store              应用级数据(state)状态管理
│  │  └── index.js
│  └── views              页面目录
│    ├── hello.vue
│    └── notfound.vue
├── static             纯静态资源,不会被wabpack构建。
└── test              测试文件目录(unit&e2e)
  └── unit              单元测试
    ├── index.js            入口脚本
    ├── karma.conf.js          karma配置文件
    └── specs              单测case目录
      └── Hello.spec.js

安装element plus

引入element plus组件(https://element-plus.org/zh-CN/),这样我们就可以获得好看的vue组件,开发漂亮的界面。

命令很简单:

# 切换到项目根目录
cd blog-vue
# 安装element plus
cnpm install element plus --save

然后打开项目src目录下的main.js,引入element-ui依赖。

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
Vue.use(ElementPlus)

这样就可以愉快得在官网上选择组件复制代码到我们项目中直接使用啦。

安装axios

安装axios(http://www.axios-js.com/),axios是一个基于 promise 的 HTTP 库,这样我们进行前后端对接的时候,使用这个工具可以提高开发效率。

安装命令:

cnpm install axios --save

然后同样在main.js中全局引入axios

import axios from 'axios'
Vue.prototype.$axios = axios 

这样在组件中,就可以通过this.$axios.get()来发起请求了。

正文到此结束
该篇文章的评论功能已被站长关闭
本文目录