Vue3 前端项目搭建详细教程

用脚手架创建项目

下载脚手架的包

npm install @vue-cli -g

创建项目，先cd到要创建的文件夹下

vue create <项目名>

安装一些开发包

npm install element-plus --save
npm install vue-router@4 --save

这里可能会报一些版本冲突等问题，可以强制执行：

npm install element-plus --save --legacy-peer-deps

解释：在NPM v7中，现在默认安装 peerDependencies，–legacy-peer-deps 目的是绕过 peerDependency 自动安装；它告诉 NPM 忽略项目中引入的各个 modules 之间的相同 modules 但不同版本的问题并继续安装，保证各个引入的依赖之间对自身所使用的不同版本 modules 共存。

在 src 目录下创建一个 store 文件夹，并在此文件夹下创建一个 index.js 文件。

import { createStore } from 'vuex'
import { state } from './state'

export default createStore({
	// 自定义数据
    state,
    mutations: {
    	// 自定义方法
        increment(state) {
            state.count++; 
        },

        decrease(state) {
            state.count--;
        }
    }
})

在 src 目录下创建一个 routers.js 文件。

import { createRouter, createWebHashHistory } from 'vue-router'

import ContainerPage from './components/ContainerPage'
import HomePage from './components/HomePage'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {path: '/', component: ContainerPage},
        {path: '/container', component: HomePage},
    ]
})

export default router;

修改 main.js 文件：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import routers from './routers'

const app = createApp(App)

app.use(routers);
app.use(store);
app.use(ElementPlus);

app.mount('#app');

修改 App.vue 文件：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

测试

启动程序：

npm run serve

访问 http://localhost:8080/#/container 地址，成功看见页面。

其他

element-plus 官网推荐自动导入

首先安装插件：

npm install -D unplugin-vue-components unplugin-auto-import

修改 vue.config.js 文件：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      require('unplugin-vue-components/webpack')({ /* options */ }),
      require('unplugin-auto-import/webpack')({ /* options */ }),
    ],
  },
})

创建一个 vue 文件，启动项目，查看效果。

<template>
    <el-header>Header</el-header>
    <el-main>
        <el-button type="primary">Primary</el-button>
    </el-main>
</template>

<script>

export default {
    name: "ContainerPage",
}
</script>

element-plus 使用 icon

安装包管理器：

npm install @element-plus/icons-vue

修改 main.js 文件，注册所有图标。

// 添加
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

安装自动导入插件：

npm i -D unplugin-icons
npm i -D @iconify/json

修改 vue.config.js 文件：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      require('unplugin-vue-components/webpack')({ /* options */ }),
      require('unplugin-auto-import/webpack')({ /* options */ }),
      require('unplugin-icons/webpack')({ /* options */ }),
    ],
  },
})

测试：

// 这种写法有冲突，会失效
<!-- <el-button type="primary" :icon="Search">Search</el-button> -->
// 推荐使用
<el-button type="primary">
    <el-icon>
        <Edit />
    </el-icon>
    Search
</el-button>

引入 echarts5

安装 echarts 包：

npm install echarts --save

全局引入 echarts，修改 main.js 文件：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import routers from './routers'
import * as echarts from 'echarts'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.use(routers);
app.use(store);
app.use(ElementPlus);
app.config.globalProperties.$echarts = echarts

app.mount('#app');

测试：

<template>
    <div>
        <p>home</p>
        <div id="myChart" style="width: 400px;height:400px;"></div>
    </div>
</template>

<script>
export default {
    name: "HomePage",
    mounted() {
        //this.$root => app
        let myChart = this.$echarts.init(document.getElementById("myChart"));
        // 绘制图表
        myChart.setOption({
            title: {
                text: "ECharts 入门示例",
            },
            tooltip: {},
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
            },
            yAxis: {},
            series: [
                {
                    name: "销量",
                    type: "bar",
                    data: [5, 20, 36, 10, 10, 20],
                },
            ],
        });
    }
}
</script>