cd F:\workspace\vue_workspace\element-ui_demo_workspace
F:
更新本地vue:
vue i -g @vue/cli
创建vue项目
vue create element-ui_demo
选择手动配置
选择你项目需要添加的功能:
按空格键选中或者取消选中,按方向键的上下切换行。
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版本:
路由是否使用 history模式:
我们希望有一个漂亮的URL,所以使用该模式,输入Y,回车。
接下来问我们的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 // 正常模式<图片表示错误!>
询问lint的时机,保存的时候还是代码提交的时候,这里我们全选。
选择测试的方案,选择哪个测试运行器,这里我们选择Jest。
端到端测试,用来模拟用户操作。这里我们选择Nightwatch。
运行在哪个浏览器上,这里我们全选。
所有的配置文件,我们希望放到一个单独的文件里,而不是所有的都融到package.json中。选择In dedicated config files
是否保存这个预配置作为未来项目的模板:是
加入elementUI:
npm install element-plus --save
将项目文件夹引入vscode
然后按照官方教程来即可。
按需引入
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