一、Vue环境安装
Vue.js 是一套用于构建用户界面的渐进式JavaScript 框架。它的核心库只关注视图层,易于上手,灵活实用。Vue.js 采用了自底向上的逐层应用设计。Vue 可以与其它第三方库或既有项目整合。Vue.js 总体来说易学易懂,学习成本相对较低,所以越来越多的前端开发者开始学习 Vue.js。
Vue.js 需要在环境中进行安装,本节将介绍在 Node.js 环境中进行 Vue.js 的安装。
1、Node.js环境安装
下载 Node.js 安装程序并安装,下载地址:https://nodejs.org
安装完成后在终端输入
node -v
查看是否安装成功。
2、Vue-cli 安装
npm install -g vue-cli
安装完成后在终端输入
vue -V
查看 vue-cli 是否安装成功。
二、Vue安装及环境配置
1、创建Vue项目
1、进入要创建项目的根目录,使用以下命名创建项目 (这里项目名为 vue-project):
vue init webpack vue-project
2、安装依赖,进入到项目目录中,执行以下命令:
cd vue-project
npm install
3、运行项目,执行以下命令进行项目运行。
npm run dev
2、配置webpack-dev-server代理
默认情况下,如果 Vue 项目需要请求后台接口,需要在前端进行 Ajax 请求,前端与后端是分离的两个系统。在开发环境中,我们可以使用 webpack-dev-server 来启动前端服务,并使用 webpack-dev-server 提供的代理功能进行 Ajax 请求转发。
例如本地前端服务的地址是 http://localhost:8080,需要请求的后台服务地址是 http://api.example.com,可以在vue-config.js 中的 devServer 字段下添加一个 proxy 配置项,如下所示:
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com',
pathRewrite: {'^/api': ''},
changeOrigin: true
}
}
}
这样就可以通过代理进行ajax请求。
3、使用element-ui 组件库
1、使用npm 安装element-ui
npm install element-ui --save
2、在 main.js 中引入 element-ui,主要是 按需引入需要的组件。
import Vue from 'vue'
import {
Form,
Input,
Checkbox,
Button,
Message
} from 'element-ui'
Vue.use(Form)
Vue.use(Input)
Vue.use(Checkbox)
Vue.use(Button)
Vue.prototype.$message = Message
3、在需要使用的.vue 文件中,直接使用 import 引入组件即可。
<template>
<div>
<el-form :model="form">
<el-form-item label="用户名">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-checkbox v-model="form.checked">记住我</el-checkbox>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleLogin">登录</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'LoginForm',
data() {
return {
form: {
username: '',
password: '',
checked: false
}
};
},
methods: {
handleLogin() {
this.$message.success('登录成功!');
}
}
};
</script>
四、安装Vue环境其他相关问题
1、Vetur 插件
提供vue文件语法支持,包括语法高亮、语法纠错和格式化等功能,可在 VSCode 的扩展商店中进行安装。
2、Vue.js DevTools
Chrome、Firefox 的 DevTools 扩展界面,用于调试 Vue.js 应用,可在相关浏览器的扩展商店中进行安装。
以上这些内容可以使你对Vue环境的安装与配置有一个大致的了解,迎接你的是一个更加高效,功能更加强大的开发新世界。