1. 因为用的是 vue3的最新模板 <script setup></script> 所以我们要将vue-cli升级到 4.5.13 以上
1.1查看和升级方法：
vue -V
@vue/cli 4.5.13 // 输出版本号
如果你需要升级版本，那么可以通过以下指令进行升级:
npm update -g @vue/cli
1.2查看升级方法：
最新的 script setup 语法，该语法在 v 3.0.0 版本中是不支持的，所以我们需要升级 vue 版本。
// 执行下面一段进行指定升级，或者省级比该版本更高：
npm i vue@3.2.8 vue-router@4.0.11 vuex@4.0.2
// 升级之后，查看 package.json 得到的版本:
{
"vue": "^3.2.8",
"vue-router": "^4.0.11",
"vuex": "^4.0.2"
}
1.3创建流程
//1
vue create ’项目名称‘
//2
Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
> Manually select features // 选择手动配置
//3
? Check the features needed for your project: (*) Choose Vue version // 选择 vue 版本
(*) Babel // 使用 babel
( ) TypeScript // 不使用 ts
( ) Progressive Web App (PWA) Support // 不使用 PWA (*) Router // 添加 vue-router
(*) Vuex // 添加 vuex
>(*) CSS Pre-processors // 使用 css 预处理器 (*) Linter / Formatter // 代码格式化
( ) Unit Testing // 不配置测试
( ) E2E Testing // // 不配置测试
//4
Choose a version of Vue.js that you want to start the project with 2.x
>3.x//选择 vue3.0版本
// 5
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n // 不使用 history模式 的路由
//6
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): > Sass/SCSS (with dart-sass) // 使用基于 dart-sass 的 scss 预处理器
Sass/SCSS (with node-sass) Less
Stylus
// 7
? Pick additional lint features: (*) Lint on save //
>(*) Lint and fix on commit // 保存时 && 提交时，都进行 lint
// 8
Save this as a preset for future projects? (y/N) n // 不存储预设
// 9
cd 项目目录
npm run serve
2. 用vue-cli创建项目后 EsLint 会报错 最好配合 Prettier - Code formatter 插件一起使用
// 使用vscode直接在插件库里安装即可 链接地址为：
// 具体到官方查看配置选项 以次来匹配eslint
https://www.prettier.cn/docs/index.html
// 顺便提一下EsLint的中文文档是：
https://eslint.bootcss.com/docs/user-guide/configuring
3. 配置好以后可以根据自己的爱好安装各类插件
// 1. element-plus
vue add element-plus // 此种方式会自动修改 App.vue 文件
// 注意：这种安装方式会自动在 main.js 中进行引入
// 2. axios
npm install axios
3. normalize // 统一浏览器的初始样式
npm i normalize.css --save-dev
// 注意: 需要配合 css-loader 和 style-loader
npm install css-loader style-loader
安装完成后 需要在 main.js 中引入
import 'normalize.css'
4. 配置好以后进项目可以先初始化项目以便于更好的开发体验:
// 1. App.vue :
<template>
<router-view />
</template>
<style lang="scss"></style>
// 2. 删除 views 文件夹下的所有 .vue 文件
// 3. 删除 components 文件夹下的所有 .vue 文件
// 4. router/index.js 中初始化代码如下:
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = []
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
前端新手 不足之处烦请指出
