精华内容
下载资源
问答
  • vscode配置vue开发环境
    千次阅读
    2019-01-18 10:12:47

         前面我把vue项目搭建好了,接下来的事情就是对项目进行开发了,不过开发之前我们需要好的工具,这里我特别喜欢vscode这款软件,相当的好用,它支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 Diff、GIT命令 等特性,而且拥有强大的插件扩展,可以满足开发者的各种需求,我非常喜欢VSCode的界面,相当的美观,而且很简洁,前面我用vscode配置了python的开发环境,今天接着是vscode来配置vue开发。

    vue开发必备插件: Vetur ,vue文件的语法高亮显示,附带有格式化功能【 Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码)】,可以对代码进行格式化检查。

     vscode-icons,可以为文件类型提供相应的图标,我最喜欢vscode的原因之一了,安装之后文件显示特别美观

     EsLint ,用来检查js、html、css代码,确保它们代码风格保持一致性符合规范,团队用很不错(我们有3个前端、3个后端),个人不喜欢。

     Auto Close Tag自动闭合HTML/XML标签,只要输入前面一个标签,后一个结尾标签会自动生成,不用再跳到后面去添加相当的方了便快捷。

    Auto Rename Tag,自动同步修改对应开头/结尾的标签,修改标签的时候相当有用,当内容很长且相同标签比较多时不容易分别,这是它作用就大了,不用担心找不到位置了,直接该前面的标签,对应的尾部标签会自动同步修改。

    后面用到再添加.....

    欢迎关注本人的公众号:编程手札,文章也会在公众号更新

    更多相关内容
  • 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...

    1、官网https://code.visualstudio.com/Download下载最新版

    下载zip,为免安装版本,直接解压即可,然后进入解压文件夹,点击Code.exe 双击即可运行。

    2、安装vue所需插件

    (1)、打开软件,使用快捷键,Shift+Ctrl+p 安装中文插件,选择Configure Display language,

    然后选择Install additional languages,选项会在左侧出现安装插件的搜做目录

    选择如下图所示的中文插件安装即可

    (2)安装vetur插件,在上图所示搜索框中搜索vetur,点击安装

    同样搜索eslint代码规范插件,点击安装

    接下来安装Prettier代码格式规范插件,搜索点击安装

    3、配置插件

    点击菜单“文件”->“首选项”->“设置”,打开对话框,如下图所示

    点击上图中的标识的图标进行配置(配置入下图):

     配置代码:

    {
        // prettier:每行在这个字符数内整合代码,如果你的屏幕较宽分辨率较高可以适当加大
        "prettier.printWidth": 120,
        // prettier:是否在每行末尾加上分号
        "prettier.semi": false,
        // prettier:如果为true,将使用单行否则使用双引号
        "prettier.singleQuote": true,
        // vetur:对html的内容使用js-beautify-html
        "vetur.format.defaultFormatter.html": "js-beautify-html",
        "files.autoSave":"off",
        "emmet.syntaxProfiles": {
          "vue-html": "html",
          "vue": "html"
        },
        "eslint.validate": [
          "javascript",
          "javascriptreact",
          "html",
          { "language": "vue", "autoFix": true }
        ],
        "eslint.options": {
          "plugins": ["html"]
        },
        //关闭vue模板校验
        "vetur.validation.template": false
      }

    至此,VSCode配置完成。

    展开全文
  • 开始配置电脑node环境配置VUE 脚手架环境以及配置VUE项目VSCode 配置 配置电脑node环境 前往 node.js 安装 电脑对应版本的node Node.js 下载 长期支持版,用的人多,应该稳定吧 安装好后 ,windows,进入cmd 输入 ...

    配置电脑环境

    安装Node.js

    前往 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 安装第一个
    在这里插入图片描述

    Vue 代码插件

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

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

    {
        "Print to console": {
            "prefix": "vue",
            "body": [
                "<!-- $1 -->",
                "<template>",
                "<div class='main-div'>$5</div>",
                "</template>",
                "",
                "<script>",
                "//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
                "//例如:import 《组件名称》 from '《组件路径》';",
                "",
                "export default {",
                "//组件名称",
                "name: 'name'",
                "//父组件传递值",
                "props: {",
                " },",
                "//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",
                ".main-div {",
                "padding: 10px;",
                "}",
                "</style>"
            ],
            "description": "Log output to console"
        }
    }
    
    

    2.4、效果图
    在这里插入图片描述
    2.5、使用,新建一个vue文件,输入 vue指令回车
    在这里插入图片描述
    在这里插入图片描述

    vue语法提示

    推荐两个插件

    1. Vue VSCode Snippets
    2. VueHelper (个人感觉是最好用的一个)

    在这里插入图片描述
    在这里插入图片描述

    vue 代码格式化

    1、安装插件:beautify

    在这里插入图片描述

    1.1. 选择 插件 鼠标右键 配置 beautify.language

    在这里插入图片描述
    找到 html 加入 vue
    在这里插入图片描述

    1.3、在工作目录下建立 .jsbeautifyrc文件

    .jsbeautifyrc 内容

    {
      "brace_style": "none,preserve-inline",
      "indent_size": 2,
      "indent_char": " ",
      "jslint_happy": true,
      "unformatted": [""],
      "css": {
        "indent_size": 2
      }
    }
    

    文件内容参数说明

    brace_style: 格式风格,详见官方说明(为避免和eslint默认检查冲突,建议此属性设置为 none,preserve-inline)
    indent_size: 缩进长度(为避免和eslint默认检查冲突,建议此属性设置为 2)
    indent_char: 缩进填充的内容(充满♂)
    jslint_happy:true: 若你要搭配jslint使用,请开启此选项
    unformatted:["a","pre"]: 这里放不需要格式化的标签类型。
    注意template也是默认不格式化的,.vue的template标签如果需要格式化请在.jsbeautifyrc重新定义不带template的声明属性。

    ~4、配置 格式化快捷键~

    搜索 快捷键设置: beautify.selection, 设置快捷键
    在这里插入图片描述

    2、推荐使用 Eslint 插件 格式化

    ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
    
    不管是多人合作还是个人项目,代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。这所谓工欲善其事,必先利其器,推荐 ESLint+vscode 来写 vue。
    
    每次保存,vscode就能标红不符合ESLint规则的地方,同时还会做一些简单的自我修正。
    

    在这里插入图片描述
    配置格式化

    2.1 启用

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    2.2 使用

    在 文件 鼠标右键 选择 格式化文档 默认 配置, 选择 Eslint 为 默认 格式化
    在这里插入图片描述
    在这里插入图片描述

    格式化前

    在这里插入图片描述

    格式化后

    在这里插入图片描述

    大功告成

    展开全文
  • 搭建vue项目

    1.搭建环境

    1.下载node.js

    去官网下载node.js,最好下载长期维护版本而不是最新的那个
    下载地址:[node.js官网](https://nodejs.org/zh-cn/)
    

    在这里插入图片描述
    检查node.js的安装:在终端输入 node -v 或者 node -version
    下面是我之前安装了旧版本又重新去下载安装了最新的在这里插入图片描述

    2.安装淘宝镜像
    从网上找了安装镜像命令,但是报错了,因为直接安装无权限,需要使用sudo命令来安装,报错如下
    在这里插入图片描述

    错误:npm install -g cnpm --registry=https://registry.npm.taobao.org
    正确:sudo npm install -g cnpm --registry=https://registry.npm.taobao.org --verbose

    会提示Password,输入电脑开机密码即可,输入之后不显示任何符号直接输入完开机密码之后点击回车即可。然后用查看是否安装成功:

    cnpm -v

    在这里插入图片描述

    2.搭建vue环境

    1.全局安装vue-cli
    需要node.js版本在v10以上
    装的时候注意都要用sodu,不然都会安装失败

    错误1:npm install -g @vue/cli //这个是从国外下载的比较慢
    错误2:cnpm install -g @vue/cli //这个是从镜像源下载
    正确:sudo npm install -g vue-cli //2.9.6版本
    正确:sudo npm install -g @vue/cli //vue-cli3

    查看安装是否成功:

    vue -v

    在这里插入图片描述

    如果已经安装了2.9.6,不能直接用这个命令接着安装vue-cli3,可以按照下面的步骤进行卸载。
    先看vue在哪里安装:

    where vue

    在这里插入图片描述
    我是直接找到这个文件地方删除vue这个文件
    在这里插入图片描述
    当然也能用命令,切换到查询出来的目录。ls查看目录结构
    确认是该目录结构以后,删除之前版本的所有vue有关文件夹

    sudo rm -rf 文件夹名称

    然后安装vue-cli3

    sudo npm install -g @vue/cli

    在这里插入图片描述

    3.环境都搭建好以后就可以开始创建脚手架项目啦

    vue create 项目名

    三、Vue-cli工程中每个文件夹和文件的用处

    • dist 文件夹:默认 npm run build 命令打包生成的静态资源文件,用于生产部署
    • node_modules:存放npm命令下载的开发环境和生产环境的依赖包
    • public:有的叫assets:存放项目中需要用到的资源文件,css、js、images以及index
    • src文件夹:存放项目源码及需要引用的资源文件
    • src-api文件夹:放ajax相关操作的代码文件:index.js(相关的接口),ajax.js(封装的axios,拦截器)。有的叫service:自己配置的vue请求后台接口方法
    • src-common文件夹:stylus的混合文件.styl,不要写到public也可以
    • src-components文件夹:存放vue开发中抽离的一些公共组件
      src-mock文件夹:mock数据存放文件及mock模拟接口(没有后台接口或接口不完整情况下可以模拟后台接口)
    • src-pages文件夹:涉及到路由的组件 src-router文件夹:vue-router,路由器及路由的配置
    • src-store文件夹:存放 vue中的状态数据,用vuex集中管理 App.vue文件:使用标签渲染整个工程的.vue组件
    • main.js文件:vue-cli工程的入口文件 package.json文件:用于 node_modules资源部 和 启动、打包项目的
    • npm 命令管理 build 文件夹:用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下
    • webpack.base.conf.js 用于配置 less、sass等css预编译库,或者配置一下 UI 库
    • config 文件夹:主要存放配置文件,用于区分开发环境、线上环境的不同,常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等
    展开全文
  • vscode构建vue开发环境

    2021-04-29 18:10:58
    vscode构建vue开发环境
  • vscode搭建vue开发环境(vue入门)

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

    千次阅读 2020-03-22 22:39:01
    1.1 vscode开发vue visual studio code 配置vue开发环境
  • VScode搭建Vue环境

    千次阅读 2022-05-21 16:16:38
    目录 参考文章 0、下载vscode 1、下载nodejs 2、nodejs环境配置 ...(3条消息) 2020-11-20_happyinsource的博客-CSDN...(3条消息) node.js安装及环境配置超详细教程【Windows系统安装包方式】_明金同学的博客-CSDN博.
  • Vue实战总结一,vscode配置vue开发环境

    千次阅读 2020-08-18 20:59:22
    vue开发必备的插件:Vetur,vue文件的语法高亮显示,附带有格式化功能Alt+Shift+F(格式化全文),可以对代码进行格式化检查. vscode-icons可以为文件类型提供相应的图标 Eslint用来检查代码 Auto Close Tag 自动闭合...
  • vscode vue 环境配置

    千次阅读 2021-11-25 15:27:15
    之前一直采用VS进行各种前端后端的开发,随着项目的需要,正逐步融合纯前端的开发模式,开始主要选型为Vue + Element 进行BS前端的开发,后续会进一步整合Vue + AntDesign的界面套件,作为两种不同界面框架的展现...
  • vscode:免费开源的现代化轻量级代码编辑器,支持大部分主流的开发语言的语法高亮、智能代码补全、自定义热键、代码对比 Diff、GIT 等特性,支持插件扩展,软件跨平台支持 Win、Mac 以及 Linux。 其他编辑器:...
  • 搭建VScode开发vue环境

    万次阅读 2021-01-05 14:44:04
    搭建VScode开发vue环境前言安装VScode插件安装环境校验 前言 前端VUE项目,原先的开发工具是HBuilderX(上手快捷,使用方便),但是随着项目规模的增大,随之而来的是维护和管理成本的不可控(手下码农或者是实习生...
  • 第一步:安装node.js ...选择适合自己系统的安装包,本文以windows x64系统为例,下载msi安装包,下载安装包后正常安装,...第二步:配置node.js和npm环境变量 安装好之后,对npm安装的全局模块所在路径以及缓存所在路径,
  • VSCode开发Vue推荐配置

    2022-05-21 13:20:51
    1.3 Vetur(Vue开发必备插件,高亮,格式化等) 1.4 图标集(为了文件图标好看) 1.5 Vue常用代码块 1.6 前端简易服务器(让html能以服务器模式运行) 2、配置settings.json文件 { "workbench....
  • vscode搭建vue3.0开发环境

    千次阅读 2021-11-25 12:01:07
    一.node 安装 1.检测node 的安装 ...安装vue-cli环境支出 cnpm install -g @vue/cli 安装最新的版本 安装完之后检测 vue -V 只要不报错 不是内部命令即可 三.vue 3.0创建项目 vue create 项目 四.启动项目 cnpm r
  • Mac m1版配置vue项目开发环境VSCode一、配置VSCode1、下载VSCode2、汉化VSCodenpm安装1、下载Node2、 安装镜像3、vue-cli安装 一、配置VSCode 1、下载VSCode 进入VSCode官网https://code.visualstudio.com,下载...
  • VSCode搭建VUE 开发环境

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

    2022-06-18 12:34:30
    接下来我们进行Vue环境配置(1条消息) vue标准化_名微的博客-CSDN博客Vue CLI 安装_w3cschoolm命令行输入指令:下载:查看版本:使用GUI创建项目下载好vue的脚手架之后,如果出现报错:‘无法将“vue”项识别为 ...
  • VSCode配置Vue模板代码

    千次阅读 2022-03-30 19:31:52
    VSCode配置Vue模板代码 前端行业使用的编辑器有很多,比如 VSCode 和 webStorm ,其中在创建 vue 文件后webStorm 可以自动生成相关的代码,而在 VSCode 中得一个一个的敲,这样既浪费时间又效率低 ,因此,在 VSCode...
  • VScode搭建Vue环境(3)&& 运行演示

    千次阅读 2022-05-24 11:56:48
    一、配置环境 1、安装cnpm: 2、安装router 3、安装axios 4、安装element 二、代码复现 1、前端(命令行) 2、前端(VScode) 3、后端(命令行) 4、后端(VScode) 参考文章: vue 3.0以上版本...
  • 下载 vscode:https://code.visualstudio.com/ 下载nodejs:https://nodejs.org/en/ cmd 中 node -v 测试是否安装成功 cmd 中 npm prefix -g 查看全局下载模块保存目录 npm setprefix -g + {自定义新目录} (我...
  • 基于vscodevue开发

    万次阅读 多人点赞 2020-06-01 18:02:17
    与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,是一个基于MVVM结构的轻量级框架,非常容易与其它库或已有项目整合。   安装vue需要借助npm指令集,...
  • 1、安装 ES7 React/Redux/GraphQL/React-Native snippets 2、在设置-首选项下搜索Include Languages 在下面增加一项 javascript ,javascriptreact。如下图 ...3、搜索trigger,在Trigger Expansion On Tab选项...
  • 一、简介说明 1.关于VS Code开发工具,安装和配置...第二种,使用Vue 官方提供的 Vue CLI搭建开发环境。 4、关于 Vue CLI CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的vue命令。它可以通过vue cre...
  • 一、简介说明 1.关于VS Code开发工具,安装和配置,更多...第二种,使用Vue 官方提供的 Vue CLI搭建开发环境。 4、关于 Vue CLI CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的vue命令。它可以通过vue ...
  • 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 项目名称 ...
  • vscode Vue开发环境配置

    千次阅读 2020-05-16 01:13:28
    现在大不同了,很多插件的默认配置就很不错了,大部分环境都是装个插件就可以直接上手了。 vscodevue 应该算是非常常见的了,本文主要记录一些我使用 vue 插件的时候遇到的一些问题。 首先,Vetur基本上是必不可...

空空如也

空空如也

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

vscode配置vue开发环境