精华内容
下载资源
问答
  • vscode配置vue环境

    千次阅读 2019-08-22 10:42:23
    一、安装VSCode、NodeJS VSCode:https://code.visualstudio.com/ NodeJS:https://nodejs.org/en/ 二、打开VSCode,安装常用插件 如图所示(安装后重新加载即可): 三、项目中添加.vscode文件夹,文件夹中添加...

    一、安装VSCode、NodeJS
    VSCode:https://code.visualstudio.com/

    NodeJS:https://nodejs.org/en/

    二、打开VSCode,安装常用插件
    如图所示(安装后重新加载即可):
    在这里插入图片描述
    三、项目中添加.vscode文件夹,文件夹中添加setting.json项目设置文件
    在这里插入图片描述

    {
        "eslint.autoFixOnSave": true,
        "eslint.validate": [
          "javascript",
          "javascriptreact",
          {
            "language": "html",
            "autoFix": true
          },
          {
            "language": "vue",
            "autoFix": true
          }
        ],
        "prettier.eslintIntegration": true,
        "search.exclude": {
          "**/dist": true
        },
        "vetur.validation.template": false
    }
    
    展开全文
  • Mac使用VSCode配置vue环境

    千次阅读 2020-02-14 20:38:03
    一、配置环境 VSCode官网下载安装Mac VSCode(默认安装的是英文版) VSCode汉化 输入 “configure display language” 然后点击确定后,重启VSCode工具 安装vue插件vetur,实现支持vue文件的代码高亮(选择...

    一、配置环境

    1. VSCode官网下载安装Mac VSCode(默认安装的是英文版)
    2. VSCode汉化
      在这里插入图片描述
      在这里插入图片描述
      输入 “configure display language” 然后点击确定后,重启VSCode工具
    3. 安装vue插件vetur,实现支持vue文件的代码高亮(选择extends -> Vetur)
      在这里插入图片描述
    4. 打开VSCode控制台
      在这里插入图片描述
    5. 浏览器访问 http://localhost:8080
      在这里插入图片描述
    展开全文
  • VScode配置Vue环境

    2019-07-23 22:01:22
    1 中文配置 点击这个插件商店 搜索 Chinese 点击install 重启之后就是我们可以操作的中文界面了 2 安装Vetur同上 3 ESLint 4 Auto Close Tag 以及 Auto Rename Tag 5 Path Intellisense 在你输入...

    1 中文配置

    点击这个插件商店 搜索 Chinese

    点击install 重启之后就是我们可以操作的中文界面了

    2 安装Vetur同上

    3 ESLint 

    4 Auto Close Tag 以及 Auto Rename Tag

    5 Path Intellisense 在你输入目录路径时自动补全

    6 HTML CSS Support 属性class id等补全

    7 Keymap 快捷键 那个熟练用哪个。

    8 vscode-icons

    9 更换终端  git Bash

    默认的是powershell

    我们选择默认Shell

    当然有些同学没有安装git 那就百度搜索git 在官网下载即可

    这个命令shell特别好用去那个盘不用输什么cd C:\

    只需要 cd /c 即可

    选择之后需要关闭终端选项卡重新打开 之后就是git bash 了还是彩色的 真香。

    最后再啰嗦一句 需要 安装node.js环境 和yarn环境的直接百度 去官网下载安装包 安装即可。

    额。再啰嗦一句 需要配置setting sync的插件的 请妥善保存token 我没保存。现在又走了一遍教程  !_ !

    !!!!

    进入到cmd命令框输入npm install --global vue-cli

    zhangjie@DESKTOP-OH31QSU MINGW64 /d/vscodeProjects/xlsttest (master)
    # 重要!!! 这里进入了xlsttest目录 然后初始化时需要指定该目录
    $ vue init webpack xlsttest
    
    ? Project name xlsttest
    ? Project description test xls
    ? Author moxiao <1428743731@qq.com>
    ? Vue build standalone      
    ? Install vue-router? No
    ? Use ESLint to lint your code? Yes
    ? Pick an ESLint preset Standard
    ? Set up unit tests No
    ? Setup e2e tests with Nightwatch? No
    ? Should we run `npm install` for you after the project has been created? (recommended) npm
    
       vue-cli · Generated "xlsttest".

     

    展开全文
  • VSCode配置Vue脚手架环境

    千次阅读 2020-11-10 12:22:56
    开始配置电脑node环境配置VUE 脚手架环境以及配置VUE项目VSCode 配置 配置电脑node环境 前往 node.js 安装 电脑对应版本的node Node.js 下载 长期支持版,用的人多,应该稳定吧 安装好后 ,windows,进入cmd 输入 ...

    配置电脑node环境

    前往 node.js 安装 电脑对应版本的node Node.js
    在这里插入图片描述
    下载 长期支持版,用的人多,应该稳定吧
    安装好后 ,windows,进入cmd 输入 node -v 验证是否安装成功,Linux 则打开终端输入 node -v
    在这里插入图片描述
    输入 node -v后会出现 安装的node版本号,安装成功
    #配置淘宝镜像:

    解决国内的网络连接npm速度较慢,甚至很多东西都无法下载安装。安装  淘宝国内镜像
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    之后 npm install 命令 更改为 cnpm install
    

    配置VUE 脚手架环境以及配置VUE项目

    配置 脚手架环境:

    安装node.js后
    
    在cmd或者vscode打开终端
    
    安装脚手架:    			cnpm install -g vue-cli 或者 npm install -g vue-cli
    安装 webpack(打包js的工具): 	cnpm install -g webpack 或者 npm install -g webpack
    
    以上操作 是 只需要配置一次安装一次即可
    

    创建VUE

    选择一个文件夹创建vue项目,CMD或者VSCode 终端 ;
    输入:  	  vue init webpack 项目名 ,然后回车回车到底创建VUE项目;
    运行项目:   先cd到项目文件夹,然后输入以下指令  npm run dev 启动;
    

    npm run dev 启动
    npm run build 编译项目 得到 dist文件夹,复制到tomcat webpack,或者Nginx 安装文件夹中部署
    Ctrl + c 输入y 停止项目,输入n 取消

    安装开发所可能会需要用到的依赖:
    安装 VUEX

    cnpm install vuex  --save 或者 npm install vuex  --save
    

    安装axios

    cnpm install axios --save 或者 npm install axios --save
    

    安装 sass

    /*sass sass-loader依赖于node-sass 所以一并安装*/
    这里使用的是淘宝镜像 cnpm 安装 没有安装淘宝镜像的话 使用 npm
    cnpm install	sass --save-dev
    cnpm install	node-sass --save-dev
    cnpm install	sass-loader --save-dev
    

    如果 sass报错:** Invalid options object. Sass Loader has been initialized using an options obj**
    在这里插入图片描述
    卸载 sass-loader和node-sass 换一个版本安装

    cnpm uninstall sass-loader
    cnpm uninstall node-sass
    
    cnpm install node-sass@4.13.1 --save-dev
    cnpm install sass-loader@7.1.0 --save-dev
    

    cnpm install XXXX --save 安装的依赖都会在 package.json > dependencies
    cnpm install XXXX --save-dev 安装的依赖都会在 package.json > devDependencies
    在这里插入图片描述

    VSCode 配置

    1、安装中文简体VSCode插件,插件库搜索Chinese 安装第一个
    在这里插入图片描述
    2.1、配置快速创建VUE模版,插件库中搜索 Vetur,让VSCode可以识别VUE代码
    在这里插入图片描述
    2.2、文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定
    在这里插入图片描述

    在这里插入图片描述
    2.3、输入 vue.json回车,将模版复制进去

    {
        "Print to console": {
            "prefix": "vue",
            "body": [
                "<!-- $1 -->",
                "<template>",
                "<div class='$2'>$5</div>",
                "</template>",
                "",
                "<script>",
                "//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
                "//例如:import 《组件名称》 from '《组件路径》';",
                "",
                "export default {",
                "//import引入的组件需要注入到对象中才能使用",
                "components: {},",
                "data() {",
                "//这里存放数据",
                "return {",
                "",
                "};",
                "},",
                "//监听属性 类似于data概念",
                "computed: {},",
                "//监控data中的数据变化",
                "watch: {},",
                "//方法集合",
                "methods: {",
                "",
                "},",
                "//生命周期 - 创建完成(可以访问当前this实例)",
                "created() {",
                "",
                "},",
                "//生命周期 - 挂载完成(可以访问DOM元素)",
                "mounted() {",
                "",
                "},",
                "beforeCreate() {}, //生命周期 - 创建之前",
                "beforeMount() {}, //生命周期 - 挂载之前",
                "beforeUpdate() {}, //生命周期 - 更新之前",
                "updated() {}, //生命周期 - 更新之后",
                "beforeDestroy() {}, //生命周期 - 销毁之前",
                "destroyed() {}, //生命周期 - 销毁完成",
                "activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发",
                "}",
                "</script>",
                "<style lang='scss' scoped>",
                "/**scoped 表示样式只在当前组件有效*/",
                "//@import url($3); 引入公共css类",
                "$4",
                "</style>"
            ],
            "description": "Log output to console"
        }
    }
    

    2.4、效果图
    在这里插入图片描述
    2.5、使用,新建一个vue文件,输入 vue指令回车
    在这里插入图片描述
    在这里插入图片描述
    3、 安装VUE语法提示插件,插件库搜索VUE
    在这里插入图片描述

    大功告成

    展开全文
  • 下载安装并配置VSCode 随便百度上搜个最新的VSCode安装好后,点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展,这里要安装两个插件。 1、vetur插件的安装 该插件是vue文件基本语法的高亮插件,在插件窗口中输入...
  • 前面我把vue项目搭建好了,接下来的事情就是对项目进行开发了,不过开发之前我们需要好的工具,这里我特别喜欢vscode这款软件,相当的好用,它支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、...
  • 搭建VScode开发vue环境

    千次阅读 2021-01-05 14:44:04
    搭建VScode开发vue环境前言安装VScode插件安装环境校验 前言 前端VUE项目,原先的开发工具是HBuilderX(上手快捷,使用方便),但是随着项目规模的增大,随之而来的是维护和管理成本的不可控(手下码农或者是实习生...
  • 网站开发(三)VSCode配置Vue环境

    千次阅读 2019-02-19 16:20:24
    目录1、安装VsCode2、配置VSCode2.1配置语言2.2安装扩展工具 1、安装VsCode 进入官网 https://code.visualstudio.com/ 下载成功后,点击安装,本软件为免费软件,安装完成后可直接双击开启软件。 安装成功后打开...
  • VSCode配置vue开发环境

    千次阅读 2019-12-10 10:07:40
    1、官网https://code.visualstudio.com/Download下载最新版 ... 2、安装vue所需插件 (1)、打开软件,使用快捷键,Shift+Ctrl+p 安装中文插件,选择Configure Display language, 然后选择Install additi...
  • vscode搭建vue开发环境(vue入门)

    千次阅读 2021-03-20 02:16:51
    安装VScode 从官网下载,安装就行。以下操作在win+r -> cmd 命令行界面讲解, 在vscode中就是在项目空白处右键open in Integrated Terminal(在内部终端中打开)执行即可。 二.安装node.js 从nodejs官网下载。...
  • VSCodeVUE环境的初始安装配置

    千次阅读 2019-05-16 17:30:05
    文章目录vscodevue初始安装vue-cli初始化一个vue项目常见问题整理vue init卡住,缓慢问题vscode字体放大vscode 如何快速定位到某文件、全局搜索、修改快捷键vue init webpack 与vue create 创建项目有什么区别vue-...
  • VSCode配置Vue项目

    千次阅读 2020-06-15 19:07:22
    1、下载安装VSCode,直接到官网下载 官网地址:https://code.visualstudio.com/ 下载一个.zip压缩包,解压即可用 2、汉化 按快捷键Ctrl+shift+P打开命令面板,选择 安装中文简体 安装完后重启即可 3、...
  • VSCode搭建VUE 开发环境

    万次阅读 2020-03-26 17:07:19
    1,下载Node.js,去官网... 选择Windows Installer (.msi)64位版本 二、安装Node.js 双击下载文件,选择安装路径,安装。...安装完后在cmd中执行 node -v 查看版本 ...三、配置npm的全局模...
  • 搭建vscode+vue环境

    万次阅读 多人点赞 2018-01-23 13:50:30
    一、安装vue.js1.简介Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易...
  • vscode Vue开发环境配置

    2020-05-16 01:13:28
    现在大不同了,很多插件的默认配置就很不错了,大部分环境都是装个插件就可以直接上手了。 vscodevue 应该算是非常常见的了,本文主要记录一些我使用 vue 插件的时候遇到的一些问题。 首先,Vetur基本上是必不可...
  • 一、简介说明 1.关于VS Code开发工具,安装和配置,更多...第二种,使用Vue 官方提供的 Vue CLI搭建开发环境。 4、关于 Vue CLI CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的vue命令。它可以通过vue ...
  • 但别的地方要配置接受参数 router.index.js (router下的) path:'/four/1/:id', props:true 要接受参数的组件(vue格式): export default { props:['id'], }; 路径去掉# 在router.index.js里面 export default ...
  • 关于prettier的配置,不想在语句后加分号,双引号全换成单引号等都不行,并且配置文件命令都是对的,麻烦大哥求解
  • vscode 搭建vue环境

    2020-09-18 16:18:03
    1、安装vscode: 官网地址:https://code.visualstudio.com/ 选择自己要安装的文件夹,然后一路next就行了 安装前端开发必要插件:https://blog.csdn.net/yujing1314/article/details/90340647 2、安装nodejs...
  • vsCode搭建Vue3.0开发环境

    千次阅读 2020-09-21 22:28:13
    步骤1:安装vue-cli最新稳定版本 前提:vue-cli版本要超过v4.5 原来版本为@vue/cli 4.2.3,安装vue-cli最新稳定版本 npm install -g @vue/cli@next 步骤2:使用Vite快速搭建vue开发环境 npm init vite-app 项目名称 ...
  • vue环境配置vscode调试

    千次阅读 2019-09-13 15:50:29
    本教程关于vuevscode 中的调试及开发。使用mac系统完成配置配置脚本在 vue_install.sh 详细说明链接 mac安装 vue开发环境 以下展示 shell内容的详细信息。 #!/bin/bash -v #set -v echo "vrew 版本." ...
  • F:\VSCode\VueDemo1m 第三部:打开code 命令 进行安装 在界面打开: 查看-》调试控制台-》选择终端 第四步: 在终端输入命令npm init -f 初始化 然后输入引入 vue 命令 npm install vue 我们可以看到已经...
  • 在用VScode运行Vue项目前,我们需要先配置node.js环境,就类似于使用eclipse前需要配置Java环境的这个过程。 一、安装node.js并配置环境变量 1、安装 从官网下载安装包,解压到指定位置,就相当于安装完成了。...
  • 基于vscodevue开发环境搭建 https://www.jianshu.com/p/2c99e1faad40 yangsg关注 22019.05.30 08:46:19字数 916阅读 6,895 Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底...
  • Vue环境搭建+VSCode+Win10

    万次阅读 多人点赞 2018-05-19 18:19:47
    一、安装Node.js(js的运行环境) 1.在Node.js官网https://nodejs.org/en/download/下载安装包。 2.下载后进行安装。 3.打开命令行,输入node -v可以查看到版本号。输入npm –v可看到npm版本号。 新版的Node.js已...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,116
精华内容 2,046
关键字:

vscode配置vue环境

vue 订阅