三、使用VSCode配置简单的vue项目
由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的。因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习。今天技术主管说让大家熟悉下VSCode开发vue,所以自己摸索了好久,才算是把简单的项目配置成功了。后续还得自己多了解这方面的知识。想着怕时间长了自己会忘记,所以写下来也供有需要的人一起学习。
一.配置环境
1.1 下载VSCode,官网直接下载就行。
1.2 汉化VSCode
Ctrl+Shift+P 输入 "configure display language" 然后点击确定后,修改locale.json文件下的属性"locale"为"zh-CN". 重启VSCode工具
若重启后VSCode仍为英文版,在商店中搜索 Chinese 安装中文插件,再重新启动VSCode即可.
1.3 安装vue插件vetur,实现支持vue文件的代码高亮
安装插件:ctrl+Shift+X 在商店中查找 vetur 或者 Ctrl + P 然后输入 ext install vetur 然后回车点安装即可
然后在文件->首选项->设置 找到用户设置,点开 userSettings 添加如下的设置
"emmet.syntaxProfiles": {"vue-html":"html","vue":"html"}
1.4安装ESLint 插件
安装插件:ctrl+Shift+X 在商店中查找 eslint或者 Ctrl + P 然后输入 ext install eslint然后回车点安装即可
同样的需要在配置文件中添加如下设置信息:
"eslint.validate":["javascript","javascriptreact","html","vue" ],"eslint.options": {"plugins": ["html"]},
"eslint.options":{
"plugins":["html"]
}
最终的配置信息如下所示:
二.创建一个vue项目
2.1使用快捷键 Ctrl+~打开终端,输入命令行 vue init webpack yourProjectName ,其中yourProjectName为你的项目名称,这里我创建的是helloworld. 注:以管理员身份运行vs code
接下来根据提示进行操作
安装完毕后 运行 npm run dev 会出现访问地址:http://localhost:8080
在安装过程中可能会出现 ‘webpack-dev-server’不是内部或外部指令的错误 这是因为在上一步的操作中,我们选择了NO,自己手动注入依赖文件,在后续的npm install 命令后,项目文件内会生成node_modules文件夹,网上有说是重新删除文件夹,然后在项目根目录重新运行终端,输入npm install ,npm run bulid 最后输入 npm run dev 就可成功运行了。但是我试了很多次还是不行。最后又重新新建了项目在是否注册依赖时,选择了 Yes 然后就成功运行了。
最后的效果图是这样的。
至此,一个简单的vue项目就搭建好了。
转:https://www.cnblogs.com/wnxyz8023/p/9989447.html
三、使用VSCode配置简单的vue项目的更多相关文章
- VSCode配置简单的vue项目
VSCode配置简单的vue项目 https://www.cnblogs.com/wnxyz8023/p/9989447.html 由于最近要使用的项目框架为前后端分离的,采用的是vue.js+web ...
- 使用VSCode配置简单的vue项目
由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...
- 搭建Vue.js环境,建立一个简单的Vue项目
基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...
- 【linux】【jenkins】自动化运维三 整合gitlab、docker发布vue项目
由于工作需要,这里我先创建一个vue的工程. 1.首先安装好gitlab相关插件:GitLab.GitLab Hook.NodeJS 插件安装参考:https://www.cnblogs.com/jx ...
- vue的学习--如何使用Intellij IDEA配置并运行vue项目
重新接触vue,开始学习使用IDE对vue项目进行配置和运行项目. 1.前面的准备 一般的教程都能到通过命令行运行npm run dev,并通过结果显示的端口,用浏览器访问自己的vue项目的结果.但是 ...
- vue-cli+webpack搭建简单的vue项目框架
0.先去官网下载安装nodeJS 1.在cmd中输入命令 node -version 若出现node版本号 则安装成功 2.通过命令:cd 文件夹名 进入某具体文件夹后进行如下命令操作: ...
- 使用IDEA工具配置和运行vue项目(详细其中的坑)
刚来公司实习发现公司的前端使用的是vue,之前根本就没有听说过.然后一上来就需要看代码,but but 就是没有文档什么的东西, 就需要自己去研读,我就想去运行其中的前端和后端联调起来方便理解,结果在 ...
- 通过webpack2从0开始配置自己的vue项目 1
PS 阅读者需要node基础.webpack原理知识.vue基础 安装node 这个网上很多教程 打开终端 创建项目 npm init 全局安装: cnpm i webpack webpack-dev ...
- 基于Idea从零搭建一个最简单的vue项目
一.需要了解的基本知识 node.js Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.N ...
随机推荐
- Java中的super的使用
- Docker清除容器镜像命令:
# ~/.bash_aliases # Kill all running containers. alias dockerkillall='docker kill $(docker ps -q)' # ...
- django session 加密cookie型
a. 配置 settings.py SESSION_ENGINE = 'django.contrib.sessions.backends.signed_cookies' # 引 ...
- QT 设置应用程序图标和可执行程序图标
1, 首先准备个ICO图标.例如:myappico.ico 在工程目录下新建images文件夹并你的图标myappico.ico(只能用ico格式的图片)放到工程目录下的images文件夹下 2, 用 ...
- 题解 [BZOJ4886] 叠塔游戏
题面 解析 这是个有趣的建图题啊. 首先我们可以发现,宽度严格递增是没什么用的. 因为实际上我们在旋转完以后, 矩形的顺序是可以随便排的. 因此只要保证宽度互不相同就行了. 然后,我们对长和宽离散化, ...
- Nginx 转发特点URL到指定服务
location ^~ /fs/ {#如https://xx.com/fs/upload 转发到文件服务器 proxy_pass http://127.0.0.1:8080/fs/; }
- linux系统编程--文件IO
系统调用 什么是系统调用: 由操作系统实现并提供给外部应用程序的编程接口.(Application Programming Interface,API).是应用程序同系统之间数据交互的桥梁. C标准函 ...
- 一个轻量级的模态组件,“礼貌地”要求您的用户停止使用过时的IE浏览器
插件github地址:https://github.com/panteng/ie-blocker 我们在做项目时,会考虑到浏览器的兼容问题,当然做,全浏览器都支持的项目我还没经历过,也不想经历,目前做 ...
- Appium基础教程
目录 Appium教程 Appium简介 App自动化测试工具对比 Appium实现原理 环境搭建 Andorid介绍 基本架构 常见布局/视图 基本控件 控件常见属性 Adb介绍 Adb常用命令 A ...
- 如何检测域名是否被微信屏蔽 微信域名检测接口API是如何实现
微信域名检测技术的主要用户是微信域名防封,大家知道拼多多这种网站,靠诱导分享方式在微信里面摇身一变已经估值160亿美元,身价仅次于京东了 ,这是何等的速度,简直是惊为天人,but 如果你想玩微信病毒营 ...