由于最近要使用的项目框架为前后端分离的,采用的是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项目的更多相关文章

  1. VSCode配置简单的vue项目

    VSCode配置简单的vue项目 https://www.cnblogs.com/wnxyz8023/p/9989447.html 由于最近要使用的项目框架为前后端分离的,采用的是vue.js+web ...

  2. 使用VSCode配置简单的vue项目

    由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...

  3. 搭建Vue.js环境,建立一个简单的Vue项目

    基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...

  4. 【linux】【jenkins】自动化运维三 整合gitlab、docker发布vue项目

    由于工作需要,这里我先创建一个vue的工程. 1.首先安装好gitlab相关插件:GitLab.GitLab Hook.NodeJS 插件安装参考:https://www.cnblogs.com/jx ...

  5. vue的学习--如何使用Intellij IDEA配置并运行vue项目

    重新接触vue,开始学习使用IDE对vue项目进行配置和运行项目. 1.前面的准备 一般的教程都能到通过命令行运行npm run dev,并通过结果显示的端口,用浏览器访问自己的vue项目的结果.但是 ...

  6. vue-cli+webpack搭建简单的vue项目框架

    0.先去官网下载安装nodeJS 1.在cmd中输入命令 node -version    若出现node版本号 则安装成功 2.通过命令:cd 文件夹名     进入某具体文件夹后进行如下命令操作: ...

  7. 使用IDEA工具配置和运行vue项目(详细其中的坑)

    刚来公司实习发现公司的前端使用的是vue,之前根本就没有听说过.然后一上来就需要看代码,but but 就是没有文档什么的东西, 就需要自己去研读,我就想去运行其中的前端和后端联调起来方便理解,结果在 ...

  8. 通过webpack2从0开始配置自己的vue项目 1

    PS 阅读者需要node基础.webpack原理知识.vue基础 安装node 这个网上很多教程 打开终端 创建项目 npm init 全局安装: cnpm i webpack webpack-dev ...

  9. 基于Idea从零搭建一个最简单的vue项目

    一.需要了解的基本知识 node.js Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.N ...

随机推荐

  1. Java中的super的使用

  2. Docker清除容器镜像命令:

    # ~/.bash_aliases # Kill all running containers. alias dockerkillall='docker kill $(docker ps -q)' # ...

  3. django session 加密cookie型

    a. 配置 settings.py           SESSION_ENGINE = 'django.contrib.sessions.backends.signed_cookies'   # 引 ...

  4. QT 设置应用程序图标和可执行程序图标

    1, 首先准备个ICO图标.例如:myappico.ico 在工程目录下新建images文件夹并你的图标myappico.ico(只能用ico格式的图片)放到工程目录下的images文件夹下 2, 用 ...

  5. 题解 [BZOJ4886] 叠塔游戏

    题面 解析 这是个有趣的建图题啊. 首先我们可以发现,宽度严格递增是没什么用的. 因为实际上我们在旋转完以后, 矩形的顺序是可以随便排的. 因此只要保证宽度互不相同就行了. 然后,我们对长和宽离散化, ...

  6. Nginx 转发特点URL到指定服务

    location ^~ /fs/ {#如https://xx.com/fs/upload 转发到文件服务器 proxy_pass http://127.0.0.1:8080/fs/; }

  7. linux系统编程--文件IO

    系统调用 什么是系统调用: 由操作系统实现并提供给外部应用程序的编程接口.(Application Programming Interface,API).是应用程序同系统之间数据交互的桥梁. C标准函 ...

  8. 一个轻量级的模态组件,“礼貌地”要求您的用户停止使用过时的IE浏览器

    插件github地址:https://github.com/panteng/ie-blocker 我们在做项目时,会考虑到浏览器的兼容问题,当然做,全浏览器都支持的项目我还没经历过,也不想经历,目前做 ...

  9. Appium基础教程

    目录 Appium教程 Appium简介 App自动化测试工具对比 Appium实现原理 环境搭建 Andorid介绍 基本架构 常见布局/视图 基本控件 控件常见属性 Adb介绍 Adb常用命令 A ...

  10. 如何检测域名是否被微信屏蔽 微信域名检测接口API是如何实现

    微信域名检测技术的主要用户是微信域名防封,大家知道拼多多这种网站,靠诱导分享方式在微信里面摇身一变已经估值160亿美元,身价仅次于京东了 ,这是何等的速度,简直是惊为天人,but 如果你想玩微信病毒营 ...