新建vue项目
安装Vue3及脚手架
使用命令npm install vue@next及npm install -g @vue/cli分别下载vue及其命令行工具。使用命令vue --version查看版本如下图,表示安装完成。
新建项目
创建项目:vue create 项目名称
选择选项:Manually select features
根据自己项目需求选择相应的选项,使用空格进行选择
- babel---转码
- typescript---ts
- Progressive Web App (PWA) Support---支持渐进式Web应用程序(PWA)
- router---vue-router
- vuex---vuex
- CSS Pre-processors---css预处理
- Linter / Formatter---代码风格检查和格式化
- Unit Testing---单元测试
-
E2E Testing---e2e测试
选中表示支持,回车。
根据提示选择自己需要的配置,命令行工具会自动根据你的需要下载好相关依赖并搭建好初始项目。
按照提示的命令运行项目,可以看见项目已经成功启动。
之后,在此基础项目上添砖加瓦即可。
安装ElementPlus
npm install element-plus --save
说明
使用--save-dev简写为-D的插件是被写入到devDependencies对象里面。里面的插件只用于开发环境,不用于生产环境。
使用--save简写为-S的插件是则被写入到dependencies对象里面。是需要发布到生产环境的。
引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).use(store).use(router).mount("#app");
接下来就可使用ElementPlus中的各类组件了。
Tips
项目中若有less文件且运行时出现如下错误:
Syntax Error: TypeError: this.getOptions is not a function
应该是less版本过高,安装较低版本的less和less-loader即可解决。