vue2项目初始化创建

最新推荐文章于 2024-07-29 11:43:06 发布

m0_65043134

最新推荐文章于 2024-07-29 11:43:06 发布

阅读量989

点赞数 10

分类专栏： vue2 文章标签： vue.js

本文链接：https://blog.csdn.net/m0_65043134/article/details/137676573

版权

vue2 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

背景：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