使用Vue-cli构建Vue3+Ts项目

---

• Webpack5
• Vue-cli5，Vue3+VueRouter4
• TypeScript
• Pinia,Element-Plus
• node 16, npm, yarn

目录

1.依赖安装

2.构建项目

2.1项目初始化

2.2 安装快乐的小菠萝

2.3 修改prettier配置，调整代码风格

2.4 在项目中使用Element-Plus

2.5 简单配置一下devServer

3.查看webpack配置信息

3.总结

---

目录结构

vue-cli-project
├─ .browserslistrc
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ auto-imports.d.ts
├─ babel.config.js
├─ components.d.ts
├─ package-lock.json
├─ package.json
├─ public
│  ├─ favicon.ico
│  └─ index.html
├─ README.md
├─ src
│  ├─ App.vue
│  ├─ assets
│  │  └─ logo.png
│  ├─ components
│  │  └─ HelloWorld.vue
│  ├─ main.ts
│  ├─ router
│  │  └─ index.ts
│  ├─ shims-vue.d.ts
│  ├─ store
│  │  └─ index.ts
│  └─ views
│     ├─ AboutView.vue
│     └─ HomeView.vue
├─ tsconfig.json
├─ vue.config.js
└─ yarn.lock

1.依赖安装

• 全局安装vue脚手架

  npm install -g @vue/cli
  # OR
  yarn global add @vue/cli
  
  vue --version //查看vue-cli版本

• 升级版本

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli

2.构建项目

2.1项目初始化

• 进入文件打开命令行窗口

vue create vue3-projects

• 选择 Manually select features

• 这里不选Vuex，后续安装pinia

• 选择初始化依赖以vue3版本
• css预处理器选择sass
• 代码格式化 eslint+prettier

• 打开项目运行 yarn serve启动项目
• 没有的话需要先安装yarn

npm install -g yarn

• 打开终端的地址默认是http://loaclhost:8080 浏览器可以看到此页面即成功

2.2 安装快乐的小菠萝

• 官网地址点击这里传送门

2.2.1 安装

yarn add pinia
# 或者使用 npm
npm install pinia

2.2.2 项目配置

• 打开项目入口文件main.ts
• import导入并注册

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { createPinia } from "pinia";

const app = createApp(App);
app.use(createPinia());
app.use(router);
app.mount("#app");

2.2.3 简单使用

• 在src目录下新增文件夹store
• 新增文件index.ts

// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore(StoreKey.Name, {
  state: () => {
    return {
      name: "北极星",
    };
  },
  getters: {
    changeName: (state) => (state.name = "逆天而行"),
  },
  actions: {
    // 可以包含异步操作
    addPrefix() {
      this.name = "bjx" + this.name;
    },
  },
});

• 组件中使用
• 删除HelloWorld组件原本内容，写入一下内容

<template>
  <div class="hello">
    {{ obj.name }}
  </div>
  <div>{{ obj.nickName }}</div>
  <div>{{ obj.changeName }}</div>
</template>

<script lang="ts" setup>
import { useStore } from '../store/index'

const obj = useStore()
</script>

• 浏览器页面

2.3 修改prettier配置，调整代码风格

• 打开eslintrc.js文件，在rules中新增

module.exports = {
	rules: {
    'prettier/prettier': [
      'error',
      {
        printWidth: 120,
        tabWidth: 2,
        semi: false, //句末使用分号
        singleQuote: true,
        endOfLine: 'auto', //结束行形式
        trailingComma: 'none', //多行时尽可能打印尾随逗号
        arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
        proseWrap: 'preserve',
        embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
        htmlWhitespaceSensitivity: 'ignore' //对html全局空白忽略
      }
    ]
  }
}

• 根目录下新增.eslintrcignore.js配置文件，忽略指定文件的eslint检测

node_modules
*.sh
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public

2.4 在项目中使用Element-Plus

2.4.1 依赖安装以及项目引入

• 官方文档点击这里传送门
• 安装依赖

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

• 这里选择按需引入的方法，能够减少打包的体积
• 根据文档介绍，我们还需要安装一下自动引入组件的插件，提升开发效率

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

• 安装之后，根据提示我们打开vue.config.js文件配置一下插件

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      Components({
        dirs: ['src/components', 'src/views'], //指定目录下的组件自动引入
        resolvers: [ElementPlusResolver()]
      }),
      AutoImport({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
})

2.4.2 简单使用

• 上面引入之后，我们去官网复制一个el-form查看效果
• 还是在HelloWorld组件中添加代码

<template>
  <div>
    <div class="hello">
      {{ obj.name }}
    </div>
    <div>{{ obj.nickName }}</div>
    <div>{{ obj.changeName }}</div>
  </div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="Approved by">
      <el-input v-model="formInline.user" placeholder="Approved by" />
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-select v-model="formInline.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Query</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { useStore } from '../store/index'
import { reactive } from 'vue'

const obj = useStore()

const formInline = reactive({
  user: '',
  region: ''
})

const onSubmit = () => {
  console.log('submit!')
}
</script>

• 打开浏览器页面观察,如下则表示成功了！

2.5 简单配置一下devServer

• 我们可以设置项目启动后自动在浏览器打开，指定端口号等等
• 由于我们脚手架创建的项目内置了这个插件，所以只需要直接上手配置就好了
• 还是打开vue.config.js文件，新增如下配置

module.exports = defineConfig({
  publicPath: './',
  outputDir: 'dist', //打包输出目录
  assetsDir: 'assets', //静态资源目录
  devServer: {
    port: 9000,
    host: 'localhost',
    https: false,
    open: true
  },
})

• 启动服务，默认就会在9000端口打开浏览器页面

3.查看webpack配置信息

• vue.config.js相当于是二次封装了webpack的配置，我们无法直观的看到配置信息，比如它为我们内置了那些plugin以及loader
• 这里我们可以通过 vue inspect命令来进行查看

vue inspect //查看所有配置

• 查看指定loader或者plugin配置

vue inspect --rules //配置规则
vue inspect --rule svg //查看svg配置
vue inspect --plugins //插件配置
vue inspect --plugin eslint  //指定插件配置

• 控制台输入命令后可以看到

3.总结

• 以上就是基于vue-cli5构建的vue3+Ts项目，相较于默认的配置，我们引入了pinia,Element-Plus;并且修改了prettier配置定义了代码格式化风格，以及修改了部分vue.config.js的配置文件。