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. PHP0016:PHP http协议

    post提交请求头

  2. java面试必问问题总结

    1. 自我介绍 2. get跟load的区别 3. 什么是重载,什么是重写 4. HashTable跟HashMap的区别 5. Jsp九大隐式对象 6. Forword和redirect 的区别 7 ...

  3. webpack安装jQuery报错

    使用webpack搭建项目,并使用了node下载了jQuery使用,使用命令行完成构建时发现报错了, ERROR in ./node_modules/jquery/lib/node-jquery.js ...

  4. 四种常用的通知类型(xml)

    1.maven依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...

  5. kali安装后中文乱码

    参考: 文章一:https://blog.csdn.net/dust_hk/article/details/103299136?depth_1-utm_source=distribute.pc_rel ...

  6. Redis缓存数据库(一)

    先导知识:Memcache Memcache是一个高性能的分布式内存对象缓存系统,代码类似于Hash. 已经有了Memcache,为什么还要用Redis呢? 下面Memcache的缺点: 不支持数据持 ...

  7. git提交时忽略了dll

    问题说明 突然出现torisegit会自动忽略*.dll文件不会提交,比如:CSharp.dll. ​ 问题原因 原因是由于安装了Sourcetree,受到了其环境变量的影响. ​ Windows系统 ...

  8. 剑指offer-基础练习-快速排序-排序

    /* 题目:快速排序 */ /* 思路:将一个数组分为两份,左边的数字小于index,右边的数字大于index,递归划分后形成一个排序后的数组. */ void QuickSort(int data[ ...

  9. gulp常用插件之gulp-htmlmin使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-htmlmin这是一款HTML文件压缩插件. 更多使用文档请点击访问gulp-htmlmin工具官网. 安装 一键安装不多解释 npm ...

  10. gulp常用插件之gulp-rev使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-rev这是一款为静态文件随机添加一串hash值, 解决cdn缓存问题, a.css --> a-d2f3f35d3.css.根据静 ...