如何搭建一个vue项目

176 阅读1分钟

1 nodejs安装及环境变量配置

下载地址为:nodejs.org/en/

//查看版本
node -v
//v12.16.0

npm -v
//6.13.4

2 安装vue脚手架

npm install -g @vue/cli 

3 初始化前端工程

vue create sport-iui
cd sport-iui
npm run serve //启动工程

浏览器访问:http://localhost:8080

开发工具

vscode

vue插件

Vetur —— 语法高亮、智能感知、Emmet等 包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着)

EsLint —— 语法纠错

Debugger for Chrome —— 映射vscode上的断点到chrome上,方便调试(配置有点麻烦,其实我没用这个)

Auto Close Tag —— 自动闭合HTML/XML标签

Auto Rename Tag —— 自动完成另一侧标签的同步修改

JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入,除js外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

Path Intellisense —— 自动路劲补全

HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式 ————————————————