1.安装好 vscode 和 node.js 安装node.js是为了用npm(管理项目依赖)

2.调出终端 crtl +~ ,

3.终端全局安装 vue-cli  安装整个脚手架,能快速给我们构建vue项目

安装命令:npm install -g vue-cli

4。终端安装webpack包,用来打包js工具.

安装命令:npm install -g webpack

5.安装完后可以创建一个vue项目,首先建立一个文件夹,然后用vscode打开文件夹,然后终端到该文件夹,如我的是vscodeProject

创建项目命令:vue init webpack  项目名

     如:vue init webpack  learn01

然后会出现一些配置,回车就好,为yes,最后就会构建成功

6.  cd  learn01

7. npm run dev

8.访问http://localhost:8080 看到vue的视图,就项目构建成功了

二、

1.假如你在learn01项目下,再构建另一个项目在vscodeProject文件夹下 ,终端 然后 cd..就会回退到上一个文件夹

三、vscode 中一些操作

1.如果安装了 eslint :它的语法很严格,当多打空格啥的都会报错,

如: Expected space or tab after '//' in comment

故:关闭 方式如下

修改build\webpack.base.conf.js文件

四、

1.shift +crtl+n可以打开多个项目

2.终端中crtl+c 就可以终止项目运行

vscode+vue 一些基本操作的更多相关文章

  1. vscode vue 格式化 ESLint 检查 单引号 双引号 函数括号报错问题

    vscode vue 格式化 最近重新搞了下电脑,重装了 vscode 软件,在用 vue 写项目的时候,照例开启了 ESLint 语法检查,但是发现在使用 vscode 格式化快捷键的时候(shif ...

  2. vscode vue 模版生成,vue 一键生成

    vscode vue 模版 继上篇文章(vue 格式化),顺便记录下 vue 模版生成.图片就不在贴了,如果有找不到 vscode 插件商店的可以访问上篇文章. 一.安装 VueHelper 在 vs ...

  3. 搭建vscode+vue环境

    转自:https://blog.csdn.net/mao834099514/article/details/79138484 一.安装vue.js 1.简介 Vue.js(读音 /vjuː/, 类似于 ...

  4. VSCode Vue文件格式化

    参考文档:https://vuejs.github.io/vetur/formatting.html 自从将VSCode更新之后,vue文件的html格式化就失效了,而且vue文件中的js ,css格 ...

  5. vscode vue代码提示错误

    在用vscode编写vue代码时,因为安装的有vetur插件,所以当代码中有v-for语法时,会提示 [vue-language-server] 'v-for' directives require ...

  6. vscode vue开发环境搭建

    以前仅了解过VUE但没有真正上手过,现在因为工作需要准备再近几个月里系统的学习一下这款超火的前端框架,希望大佬们指教. ---------------------------------------- ...

  7. vscode vue文件格式化没效果

    在vscode 中   格式化vue文件没效果 解决办法: 点击头部文件 >首选项>设置 在右侧加入这两句 "vetur.format.defaultFormatter.js&q ...

  8. VScode VUE+PYTHON习惯用的编辑器

    本人从事运维开发工作,经常要开发一些web系统工具,这就需要用到前后端开发.vscode是我用得最舒服的一种编辑器,前端后端都习惯在上面写,这里记录一些配置. 一,插件安装 目前我最主要用的是:    ...

  9. vscode vue快速新建模板

    vscode 文件=>首选项 =>用户代码片段 =>新建全局代码片段     {     "Print to console": {         " ...

随机推荐

  1. Excel 2016双击文件打开后是空白,再次双击才能打开(或者通过文件,打开才能打开)

    问题描述: 直接双击excel文件打开后是空白的,几乎所有功能都无法使用.但是再次双击该文件能够打开,或者通过文件 --> 打开的方式才能打开. 虽说能够打开文件,但是对于咱们这种追求完美的人来 ...

  2. pytest文档32-allure描述用例详细讲解

    前言 pytest+allure是最完美的结合了,关于allure的使用,本篇做一个总结. allure报告可以很多详细的信息描述测试用例,包括epic.feature.story.title.iss ...

  3. java设计模式学习笔记--单一职责原则

    单一职责原则注意事项和细节 1.降低类的复杂度,一个类只负责一项职责 2.提高可读性,可维护性 3.降低变更引起的风险 4.通常情况下,我们应当遵守单一职责原则,只有逻辑足够简单,才可以在代码级违反单 ...

  4. 用友UAP NC 单据节点_打开参照字段的问题_从打不开参照放大镜_到成功打开了但是取不到值_到修复成功

    项目的这个功能是17年开发的,但是当时没有测试通过,今年拿出来测试(通过后会上线). 有两个表数据一开始只打算用来计算时查询,没打算放到目标单据中做表体参照字段.后来改细节问题后放到目标单据中做参照字 ...

  5. .NET/C# 万能 HTTP 模拟请求框架

    我是一名 ASP.NET 程序员,专注于 B/S 项目开发.累计文章阅读量超过一千万,我的博客主页地址:https://www.itsvse.com/blog_xzz.html HttpHelper ...

  6. salt-minion启动报错No module named salt.scripts

    这是当初部署saltstack时候的问题了,saltstack用的是0.17.4的版本.正当minion部署到最后时候,启动 minion端时报错ImportError: No module name ...

  7. oracle卸载步骤

    一.删除产品 1. 停服务,进入下图,一个个删除Oracle产品,再执行卸载 二.清注册表,开始-搜索- 输入regedit,进入注册表 1.选择HKEY_LOCAL_MACHINE\SOFTWARE ...

  8. Unable to execute command or shell on remote system: Failed to Execute process

    1.问题描述 先说下我的项目环境:jenkins部署在windows下面,项目部署也是在windows下面,ssh服务器是FreeSSHd,原来是打算用Send files or execute co ...

  9. Linux开机加载过程

    2015-01-06 10:29:13   目录 1 开机加载简介 2 常规加载流程 2.1 加载BIOS 2.2 读取MBR 2.3 boot loader 2.4 加载内核 2.5 init依据i ...

  10. WebMethods开发入门

    webMethods  Integration Platform 由用于设计.执行和管理集成解决方案的 3 类组件构成. 设计时组件:这些组件提供了开发和测试集成解决方案的工具. 1.webMetho ...