安装Vue3.x环境并创建vue项目引入element plus与axios
环境准备
1、首先我们上node.js官网(https://nodejs.org/zh-cn/),下载最新的长期版本,直接运行安装完成之后,我们就已经具备了node和npm的环境了。
安装完成之后检查下版本信息:
2、接下来,安装vue的环境
# 安装淘宝npm 下载依赖速度快
npm install -g cnpm --registry=https://registry.npm.taobao.org
#如果想用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()来发起请求了。
- 本文标签: 部署 前端 Vue
- 本文链接: http://www.92cxy.cn/article/64
- 版权声明: 本文由王小东原创发布,转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权