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 版本仿吞。
// 執(zhí)行下面一段進行指定升級响疚，或者省級比該版本更高：
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創(chuàng)建流程
//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 預(yù)處理器 (*) 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 預(yù)處理器
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 // 不存儲預(yù)設(shè)
// 9
cd 項目目錄
npm run serve
2. 用vue-cli創(chuàng)建項目后 EsLint 會報錯 最好配合 Prettier - Code formatter 插件一起使用
// 使用vscode直接在插件庫里安裝即可 鏈接地址為：
// 具體到官方查看配置選項 以次來匹配eslint
https://www.prettier.cn/docs/index.html
// 順便提一下EsLint的中文文檔是：
https://eslint.bootcss.com/docs/user-guide/configuring
3. 配置好以后可以根據(jù)自己的愛好安裝各類插件
// 1. element-plus
vue add element-plus // 此種方式會自動修改 App.vue 文件
// 注意：這種安裝方式會自動在 main.js 中進行引入
// 2. axios
npm install axios
3. normalize // 統(tǒng)一瀏覽器的初始樣式
npm i normalize.css --save-dev
// 注意: 需要配合 css-loader 和 style-loader
npm install css-loader style-loader
安裝完成后 需要在 main.js 中引入
import 'normalize.css'
4. 配置好以后進項目可以先初始化項目以便于更好的開發(fā)體驗:
// 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
前端新手 不足之處煩請指出
