在vscode中创建vue项目
2023-03-31 10:39:28 时间
1. 背景
昨天对一次成功用新电脑在vscode上跑成功项目工程里的vue项目,今天目标是自己用vscode新建一个vue项目
关于vue环境配置请看这篇:使用vscode运行Vue项目
2. 准备工作(也可跳过此步骤)
- 安装Vetur,一款Vue代码高亮显示的一款插件。
- 安装eslint代码规范插件。
- 配置Vscode工作环境
装好后点击文件->首选项->设置 打开设置界面,在设置界面右侧添加配置。点击“在settings.json中编辑”,进入代码编辑界面。
输入Vetur文档代码:
{
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
}
同理eslint:
输入eslint文档代码:
{
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
"eslint.options": {
"plugins":["html"]
}
}
3. 过程
第一步:打开vscode, 选择 文件 >> 打开文件夹 选择要创建项目的文件目录。
第二步:在“终端”中输入:vue init webpack projectName,其中projectName可以自行修改。(注意:项目名称不能有大写)
如果你在这步出现如下报错,请看这篇:vue : 无法加载文件 C:UsersUIDQ5637AppDataRoaming
pmvue.ps1,因为在此系统上禁止运行脚本第三步:在下面步骤中,一些需要填写或选择的选项,我都直接Enter了,一些需要安装的我都直接No了。
第四步:按照上图提示进入到项目目录并运行项目
第五步:在浏览器输入http://localhost:8080就可以打开项目了
相关文章
- 金融服务领域的大数据:即时分析
- 影响大数据、机器学习和人工智能未来发展的8个因素
- 从0开始构建一个属于你自己的PHP框架
- 如何将Hadoop集成到工作流程中?这6个优秀实践必看
- SEO公司使用大数据优化其模型的5种方法
- 关于Web Workers你需要了解的七件事
- 深入理解HTTPS原理、过程与实践
- 增强分析:数据和分析的未来
- PHP协程实现过程详解
- AI专家:大数据知识图谱——实战经验总结
- 关于PHP的错误机制总结
- 利用数据分析量化协同过滤算法的两大常见难题
- 怎么做大数据工作流调度系统?大厂架构师一语点破!
- 2019大数据处理必备的十大工具,从Linux到架构师必修
- OpenCV中的KMeans算法介绍与应用
- 教大家如果搭建一套phpstorm+wamp+xdebug调试PHP的环境
- CentOS下三种PHP拓展安装方法
- Go语言HTTP Server源码分析
- Go语言HTTP Server源码分析
- 2017年4月编程语言排行榜:Hack首次进入前五十