VUE(一)——创建VUE项目，引入不同组件_vue 初始化项目引入组件-CSDN博客

本文链接：https://blog.csdn.net/weixin_44635157/article/details/121026544

本文档详细介绍了如何搭建Vue.js项目，包括环境准备、创建项目、配置项目参数、引入Element UI库、实现与后端交互的Axios设置，以及如何引入和使用Echarts图表库。通过这些步骤，开发者可以快速地建立一个具备基本功能的Vue应用，并了解如何与其他库集成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue中文文档

一。环境准备

nodeJs和npm ： 官网地址下载运行即可  https://nodejs.org/en/
vue脚手架：    npm install -g @vue/cli 或者 npm install @vue/cli @vue/cli-init -g

测试：如下命令出现版本号
node -v
npm -v
vue -V

二。创建项目

1.在要创建项目的文件夹下cmd，然后命令： vue create vue-project-1，回车
2.在控制台上下键选择安装方式,然后回车
	default (bable，eslint） // 默认
    Manually select features // 手动

  选择默认回车后直接等待创建出项目
 	a.运行测试：进入项目文件夹目录下CMD，然后命令： npm run serve，。。浏览器访问：：http://localhost:8080/
 	
  选择手动
  	a.选择自己需要的特性（上下键移动键，空格键选中），回车, 特性说明见下面截图
  	b.是否使用历史路由，输入n,回车
  	c.选择项目里面需要支持何种动态样式语言，选择第二个，回车
  	d.选择配置文件的位置，因为每个插件都有自己单独的配置文件，我们选择第一个，回车
  	e.是否将当前配置选项保存起来，方便下次创建项目时使用。输入 n ，回车
	h.运行测试：进入项目文件夹目录下CMD，然后命令： npm run serve，。。浏览器访问：：http://localhost:8080/

在这里插入图片描述

三。更改显示的项目名称更改启动的端口与启动更改项目启动默认页面

1、更改显示的项目名称

package.json文件，修改name
然后npm run build//不不用
npm run serve

2、更改启动的端口与启动

项目根目录的package.json文件

 "scripts": {
    "serve": "vue-cli-service serve  --port 8080",           
    "test": "vue-cli-service serve   --open --port 9000",   //port指定端口  open表示项目启动浏览器自动打开
    "build": "vue-cli-service build"
  },


启动: npm run serve 或者npm run test等

3、更改项目启动显示的默认页面

路由文件index.js, path设置为path:"/"，启动项目后就会显示默认的组件页面
{
     path: '/',
     name: 'defaultPage',
     component: () => import('../views/OrderMenu.vue')
},

四。引入Element

引入element需要使用vue2.x，不然项目跑步起来

element官网

1.下载安装Element依赖包
	进入项目所在目录CMD，然后命令：npm i element-ui -S,
	这时在项目的node_modules就会有element的包

2,main.js导入依赖
	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
	Vue.use(ElementUI);
	
	
3.Vue页面使用，参考官网示例

<template>
    <div>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="日期"
                    width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                <template slot-scope="scope">
                    <el-button
                            @click.native.prevent="deleteRow(scope.$index, tableData)"
                            type="text"
                            size="small">
                        移除
                    </el-button>
                    <el-button
                            @click.native.prevent="deleteRow(scope.$index, tableData)"
                            type="text"
                            size="small">
                        查看
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
            <el-button @click="toggleSelection()">取消选择</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                multipleSelection: []
            }
        },

        methods: {
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        }
    }
</script>

五。引入axios与后端交互

1.安装axios模块npm install -- save axios

2.main.js导入ajax并设置后端地址
//导入axios
var axios = require('axios');
axios.defaults.baseURL = 'http://localhost:80';
Vue.prototype.$axios = axios;


3.页面ajax使用（把登录账号和密码传给后台）
methods: {
            login() {
                this.$axios
                    .post('/vue/login', {
                        username: this.loginForm.username,
                        password: this.loginForm.password
                    })
                    .then(successResponse => {
                        if (successResponse.data.code === 200) {
                            this.$router.replace({path: '/index'})
                        }
                    })
                    .catch(failResponse => {
                    })
            }
        }

4.如果连接不上，可能是跨域原因

第一种方法：前端项目加文件vue.config.js，和package.json同目录
        module.exports = {
		    devServer: {
		        disableHostCheck: true
		    }
		};

第二种方法：后端加配置类
@Configuration
public class CommonIntercepter {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //允许任何域名
        corsConfiguration.addAllowedOrigin("*");
        //允许任何头
        corsConfiguration.addAllowedHeader("*");
        //允许任何方法
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        //注册
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}

第三种方法：后端控制器加注解
@CrossOrigin(value = "*", allowCredentials = "true")
@RestController
@RequestMapping("/vue")
public class VueController {

六。引入Echarts

1.安装依赖（进入项目所在文件夹CMD）
npm install echarts -S
npm install --save echarts
npm install --save vue-echarts

2.引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.注册组件
Vue.component('myEchart', ECharts)

4.使用组件
<myEchart :options="echartsOptions" ref="myCharts" />