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
网友评论