使用VSCode创建Vue+ElementPlus前端项目准备工作
使用VSCode创建Vue+ElementPlus前端项目准备工作,适用于初学者
1、下载并安装vscode应用、node.js
地址:Download Visual Studio Code - Mac, Linux, Windows 下载 Node.js
可打开命令行cmd.exe 输入:node -v 和 npm -v 查看是否安装以及版本。
2、配置VSCode应用环境
打开VSCode,在左侧扩展栏添加扩展包,推荐添加:
(1)Chinese(Simplified)简体中文包
按下“Ctrl+Shift+P”组合键以显示“命令面板”,然后键入“display”以筛选并显示“Configure Display Language”命令。按“Enter”,然后会按区域设置显示安装的语言列表,选择简体中文,替代默认 UI 语言。
(2)Vetur
可以实现语法高亮显示、关键词提示、路径提示、代码自动检查、格式化代码等功能。
(3)Auto Close Tag
可以实现标签自动关闭、标签等功能。
3、创建Vue项目
打开命令行或在VSCode终端中,输入 npm init vue@latest创建项目:
设置项目名称、包名称以及一些其他参数配置。
项目创建好后,cd 进入项目目录,
输入:npm install,安装vite框架。
输入:npm run dev,就可以运行项目了
4、安装Element Plus UI
输入: npm install element-plus
在main.js中引入:
import ElementPlus from 'element-plus'//导入element-plus所有模块和功能
import 'element-plus/dist/index.css'//导入element-plus所有的全局CSS样式
另外还要增加:app.use(ElementPlus)
5、安装scss样式
输入: npm install sass,完成安装即可。
to be continue...
更多推荐
所有评论(0)