【vue】9.3 VUE3.0+elementUI搭建脚手架项目（vue-cli）

cd F:\workspace\vue_workspace\element-ui_demo_workspace
F:

image.png

更新本地vue:

vue i -g @vue/cli

创建vue项目

vue create element-ui_demo

选择手动配置

image.png

选择你项目需要添加的功能:
按空格键选中或者取消选中，按方向键的上下切换行。

image.png

vue3.0解决了之前对TypeScript的支持不友好的问题，全部勾选。
Babel: es6转es5
TypeScript:支持ts
Progressive Web App (PWA) Support:渐进式web应用
Router:路由
Vuex:管理状态
CSS Pre-processors：CSS预处理
Linter / Formatter：代码规范
Unit Testing：单元测试
E2E Testing：端到端测试

选择项目使用的vue版本：

image.png

路由是否使用 history模式：
我们希望有一个漂亮的URL，所以使用该模式，输入Y，回车。

image.png

接下来问我们的css预处理器使用什么。这里我们使用sass/scss(with node-sass)<图片表示错误！>。

lint：选择一个格式化配置。

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only     //  只进行报错提醒
  ESLint + Airbnb config                //  不严谨模式
  ESLint + Standard config              //  正常模式
  ESLint + Prettier                     //  严格模式
  TSLint (deprecated)                   //  TypeScript格式验证工具(TSLint只有在选择TypeScript时才会存在。)

这里我们选 ESLint + Standard config // 正常模式<图片表示错误！>

image.png

询问lint的时机，保存的时候还是代码提交的时候，这里我们全选。

image.png

选择测试的方案，选择哪个测试运行器，这里我们选择Jest。

image.png

端到端测试，用来模拟用户操作。这里我们选择Nightwatch。

image.png

运行在哪个浏览器上，这里我们全选。

image.png

所有的配置文件，我们希望放到一个单独的文件里，而不是所有的都融到package.json中。选择In dedicated config files

image.png

是否保存这个预配置作为未来项目的模板：是

image.png

加入elementUI：

npm install element-plus --save

将项目文件夹引入vscode

image.png

然后按照官方教程来即可。

按需引入

Vue CLI

借助 babel-plugin-import，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-import:

npm install babel-plugin-import -D

Vite

首先，安装 vite-plugin-style-import:

npm install vite-plugin-style-import -D

下载安装i18n

npm install --save vue-i18n

解决：error delete ·CR· (prettier/prettier)

npm run lint --fix