社区首页 >专栏 >创建Vue3项目

创建Vue3项目

张苹果

发布于 2022-11-07 09:08:02

1.5K00

代码可运行

文章被收录于专栏：vaevae

运行总次数：0

代码可运行

一，使用Vue图形界面方式创建项目，打开控制台，输入vue ui

若想使用vue的UI界面来创建项目，需将vue升级到 3.0以上的版本。不然还是通过vue create 项目名创建项目吧。

//下载vue最新版
npm i -g @vue/cli        或者   cnpm install -g @vue/cli
//打开ui界面
vue ui

二，找到Vue 项目管理器，选择新建项目，选择需要创建的文件目录，输入项目名称（尽量小写）创建，这里预设选择的是Vue3。

三，选择安装需要的插件，也可以输入命令手动安装。

//TypeScript
vue add typescript
//vue-router
npm install vue-router --save
//vuex
npm install vuex

四，启动项目

安装依赖：yarn install 或 npm install
启动项目：yarn serve
打包项目：yarn build

五，使用Elemeui Plus组件

# 安装elementui
npm install element-plus --save
# 或 
yarn add element-plus

在main.js(ts)文件中引入

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

在项目中使用

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>
<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }
]
</script>

页面效果

六，其他问题

npm run build 项目打包出现空白和 Eslint 验证问题
在vue.config.js配置

module.exports = defineConfig({
 transpileDependencies: true,
  // 避免Eslint报错
  lintOnSave: false,
  //项目打包出现空白
  assetsDir: 'static',
  parallel: false,
  publicPath: './', 
})

npm run build 项目打包之后体积过大问题。原文
在package.json中build打包命令后面，添加 --report 可以生成report.html文件，查看项目体积，如："build": "vue-cli-service build --report",

路由懒加载

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
  {
    path: '/',
    name: 'gateway',
    //按需引入
    component: () => import('../views/Gateway.vue')
  }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
export default router

将外部资源通过cdn引入，仅对Vue3

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <title>标题</title>
      <!-- 全局引入 所需外部链接 -->
      <!-- Import style -->
      <link rel="stylesheet" href="https://unpkg.com/element-plus@2.2.17/dist/index.css" />
      <!-- Import Vue 3 -->
      <script src="https://unpkg.com/vue@3.2.40/dist/vue.global.js"></script>
      <!-- Import component library -->
      <script src="https://unpkg.com/element-plus@2.2.17/dist/index.full.js"></script>
      <script src="https://unpkg.com/vue-router@4.1.5/dist/vue-router.global.js"></script>
      <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>

在 vue.config.js 中进行配置
在configureWebpack：中通过externals进行配置，格式为‘XXX’：‘SSS’ 这里 XXX 为引入资源的名称，’SSS‘表示模块提供给外部引用的名称。这里要注意’SSS‘ 是固定格式不可自定义。
productionSourceMap: false // 生产环境不产生未加密的map文件。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // 避免Eslint报错
  lintOnSave: false,
  transpileDependencies: true,
  assetsDir: 'static',
  parallel: false,
  publicPath: './',
 productionSourceMap: false, // 生产环境不产生未加密的map文件
  configureWebpack:{
    externals: {
      'vue':'Vue',
      'vue-router':'VueRouter',
      'axios':'axios',
      'element-plus':'ElementPlus',
    }
  },
})