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. 【sklearn】Toy datasets上的分类/回归问题 (XGBoost实践)

    分类问题 1. 手写数字识别问题 from sklearn.datasets import load_digits digits = load_digits() # 加载手写字符识别数据集 X = d ...

  2. 【笔记】机器学习 - 李宏毅 - 1 - Introduction & next step

    Machine Learning == Looking for a Function AI过程的解释:用户输入信息,计算机经过处理,输出反馈信息(输入输出信息的形式可以是文字.语音.图像等). 因为从 ...

  3. Magento 2 中请求( Request ) 后执行的基本过程

    入口 :index.php 引导 Bootstrap::run()  定义于 ./vendor/magento/framework/App/Bootstrap.php 用于 index.php 应用 ...

  4. 聊聊智能指针 auto_ptr、shared_ptr、weak_ptr和unique_ptr

    本文为转载:https://www.cnblogs.com/zeppelin5/p/10083597.html,对作者有些地方做了修正. 手写代码是理解C++的最好办法,以几个例子说明C++四个智能指 ...

  5. Spring-Cloud微服务踩坑

    @feignclient和@requestmapping混用的时候出错 重写springmvc扫描controller时不带有@feignclient才实例化 @Configuration @Cond ...

  6. Redis事务与可分布式锁

    1    Redis事务 1.1   Redis事务介绍 l  Redis的事务是通过MULTI,EXEC,DISCARD和WATCH这四个命令来完成的. l  Redis的单个命令都是原子性的,所以 ...

  7. jsp+servlet和ajex中遇到的问题

    软件杯的时候,我们的项目需要在手机端运行,由于本身的这个项目我们使用jsp+servlet做的一个项目,所以我们利用ajex,把eclipse作为后台运行tomcat8,,在hbuilder用weba ...

  8. JZOJ5988 珂学计树题

    题意 liu_runda曾经是个喜欢切数数题的OIer,往往看到数数题他就开始刚数数题.于是liu_runda出了一个数树题.听说OI圈子珂学盛行,他就在题目名字里加了珂学二字.一开始liu_rund ...

  9. Windows10通过命令行导出笔记本电池使用信息

    powercfg /batteryreport /output "D:\Thinkpad x1c\battery_report_2020_2_25.html" 可以导出电池的电池类 ...

  10. mysql日期函数及重复数据的查询

    -- 日期函数select CURRENT_DATE,CURRENT_TIME,CURRENT_TIMESTAMP,year(CURRENT_DATE),month(CURRENT_DATE);sel ...