背景:Vue.js 是一款流行的 JavaScript 前端框架,用于构建交互式的 Web 用户界面。它的简单性和灵活性使得它成为了众多开发者的首选。本教程将向你展示如何初始化一个基本的 Vue.js 2 项目,并开始构建你的第一个 Vue 应用程序。
步骤:
1. 安装 Node.js
Vue.js 的开发环境依赖于 Node.js 和 npm。确保你的系统已经安装了 Node.js。你可以在 Node.js 官网 下载并安装最新版本。
2. 安装 Vue CLI
Vue CLI 是一个官方提供的 Vue.js 项目脚手架工具,可以帮助我们快速搭建 Vue.js 项目。使用以下命令全局安装 Vue CLI:
npm install -g @vue/cli
3. 创建新项目
使用 Vue CLI 创建一个新的 Vue 项目。在命令行中执行以下命令(项目名:my-vue-app):
vue create my-vue-app
4. 依赖环境配置
4.1.在Vue 2项目中安装和使用axios,你需要执行以下步骤:
4.11在终端中,进入你的Vue项目的根目录。
4.12运行以下命令来安装axios:
npm install axios
4.13封装请求类:
import axios from 'axios';
export default async function request(params) {
return axios(params);
}
4.14接口请求方法:
import request from "@/utils/request";
export function getUser(params) {
return request({
url: '/api/userInfo',
method: 'GET',
params
})
}
4.15代理配置:
创建文件:.env.development
VUE_DEV_BASE_URL=http://10.0.0.0:8000
VUE_APP_PORT=8080
VUE_DEV_SERVER=http://10.0.0.0:8000
在 vue.config.js进行配置
module.exports = {
publicPath: '/',
devServer: {
port: process.env.VUE_APP_PORT,
disableHostCheck: true,
proxy: {
"^/api": {
target: process.env.VUE_DEV_SERVER,
ws: false,
changeOrigin: true,
pathRewrite: {
"^/api": "/",
}
},
}
},
}
4.2.在Vue 2项目中安装和使用Element,你需要执行以下步骤:
4.21运行以下命令来安装element-ui:
npm i element-ui -S
4.22在 main.js 中写入以下内容:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import router from './router';
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
4.3.在Vue 2项目中安装和使用Echarts,你需要执行以下步骤:
4.31 安装ECharts包:
npm install echarts --save
4.32 ECharts使用方法:
<template>
<div ref="echartsContainer" style="width: 600px; height: 400px;"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'EChartsComponent',
mounted() {
// 初始化ECharts实例
var myChart = echarts.init(this.$refs.echartsContainer);
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 示例'
},
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
</script>
4.33 CSS 使用less 安装
npm install less less-loader --save-dev
5.路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
}
]
const router = new VueRouter({
routes
})
export default router
6. 运行项目
进入到项目目录中,并运行以下命令来启动开发服务器:
cd my-vue-app
npm run serve
这将启动一个开发服务器,监听默认端口(通常为 8080),并自动打开浏览器展示你的应用程序。你现在可以在浏览器中访问 http://localhost:8080
查看你的应用程序。
7. 编辑项目
在 src
目录中找到 App.vue
文件,这是你的应用程序的根组件。你可以在这里开始编辑你的应用程序,添加新的组件、样式和功能。
8. 构建项目
一旦你满意了你的应用程序的展示效果,你可以运行以下命令来构建生产版本的应用程序:
npm run build
这将会在 dist
目录下生成一个用于生产环境的优化后的版本的应用程序。