精华内容
下载资源
问答
  • 虽然最新版的前端开发利器WebStorm支持了Vue,但是大部分人的WebStorm依然是默认不支持Vue的老版本(比如之前的我),所以需要手动添加...第二步是配置Vue模板,即快速创建Vue文件。  1.安装Vue.js插件  点击Pre...

      虽然最新版的前端开发利器WebStorm支持了Vue,但是大部分人的WebStorm依然是默认不支持Vue的老版本(比如之前的我),所以需要手动添加WebStorm对Vue的支持。要想让WebStorm支持Vue主要分两步,第一步是安装Vue.js插件,使得WebStorm能够对Vue语法进行提示;第二步是配置Vue模板,即快速创建Vue文件。

      1.安装Vue.js插件

      点击Preferences进入WebStorm的配置页面,然后点击Plugins设置插件。

      点击Browse Repositories按钮(第二个)浏览插件仓库,搜索Vue.js插件进行安装,安装完成后如下图所示。

      

     

      2.配置Vue模板

      点击Preferences进入WebStorm的配置页面,按下图层级进入File and Code Templates,即文件模板配置。

      

      

      然后点击添加模板的按钮(绿色加号按钮),输入模板名Vue,Extension(即拓展名)设为vue(意为创建出来的文件是 *.vue),输入Vue标准模板,即:

    <template>
    
    </template>
    
    <script>
    
    </script>
    
    <style>
    
    </style>

      当然,按照最新WebStorm对Vue模板的设置,可以写为:

    <template>
    #[[$END$]]#
    </template>
    
    <script>
    export default {
    name: "${KEBAB_CASE_NAME}"
    }
    </script>
    
    <style scoped>
    
    </style>

      点击Apply或OK即可保存模板,下一次创建Vue文件时,不需要新建file,而可以直接新建Vue文件。

      经过以上两步,接下来的开发可以直接使用WebStorm开发Vue。

    转载于:https://www.cnblogs.com/karthuslorin/p/8301282.html

    展开全文
  • 安装webstorm 首先安装webstorm,因为webstorm 集成了多种版本控制工具,基本的功能都可以使用,比如git。同时它也支持node.js调试,对于学生也有免费的优惠,稍后会讲如何申请。...3. 搭建vue之前准备工
  • 虽然最新版的前端开发利器WebStorm支持了Vue,但是大部分人的WebStorm依然是默认不支持Vue的老版本(比如之前的我),所以需要手动...第二步是配置Vue模板,即快速创建Vue文件。  1.安装Vue.js插件  点击Prefe...

    虽然最新版的前端开发利器WebStorm支持了Vue,但是大部分人的WebStorm依然是默认不支持Vue的老版本(比如之前的我),所以需要手动添加WebStorm对Vue的支持。要想让WebStorm支持Vue主要分两步,第一步是安装Vue.js插件,使得WebStorm能够对Vue语法进行提示;第二步是配置Vue模板,即快速创建Vue文件。

      1.安装Vue.js插件

      点击Preferences进入WebStorm的配置页面,然后点击Plugins设置插件。

      点击Browse Repositories按钮(第二个)浏览插件仓库,搜索Vue.js插件进行安装,安装完成后如下图所示。

      

     

      2.配置Vue模板

      点击Preferences进入WebStorm的配置页面,按下图层级进入File and Code Templates,即文件模板配置。

      

      

      然后点击添加模板的按钮(绿色加号按钮),输入模板名Vue,Extension(即拓展名)设为vue(意为创建出来的文件是 *.vue),输入Vue标准模板,即:

    复制代码

    <template>
    
    </template>
    
    <script>
    
    </script>
    
    <style>
    
    </style>

    复制代码

      当然,按照最新WebStorm对Vue模板的设置,可以写为:

    按 Ctrl+C 复制代码

     

    按 Ctrl+C 复制代码

      点击Apply或OK即可保存模板,下一次创建Vue文件时,不需要新建file,而可以直接新建Vue文件。

      经过以上两步,接下来的开发可以直接使用WebStorm开发Vue。

     

    文档转自:https://www.cnblogs.com/karthuslorin/p/8301282.html

    展开全文
  • webstorm 运行Vue项目环境配置 ** 一、webstorm安装 二 、Vue的安装 Vue的安装需要两个支持分别为:nodejs、npm  Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。  Node.js 的包管理器 npm,是全球...

    **

    webstorm 运行Vue项目环境配置

    **

    一、webstorm安装

    二 、Vue的安装

    Vue的安装需要两个支持分别为:nodejs、npm
      Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
      Node.js 的包管理器 npm,是全球最大的开源库生态系统。

    npm全称为Node Package Manager,是一个基于Node.js的包管理器,也是整个Node.js社区最流行、支持的第三方模块最多的包管理器(类似于java中的Maven)。

    1.nodejs安装 https://nodejs.org/en/

    下载一直下一步就可。执行命令node -v查看node版本
    最新版的node在安装时同时也安装了npm。执行npm -v查看npm版本

    2.cnpm安装 这里安装阿里的 cnpm 中国节点快 但是时间都很长。

    安装淘宝镜像(类似于阿里云的maven中央仓库镜像)

    安装命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

    验证命令:cnpm -v

    3.安装webpack

    利用npm安装webpack 命令行语句为cnpm install webpack -g

    4.接下来就是全局安装vue-cli。

    安装语句为:npm install --global vue-cli

    验证命令:vue -V (V要大写)

    二 、vue项目运行

    1.项目配置
    在这里插入图片描述

    2.安装依赖

    删除原有的node_modules目录。
    进入webstorm,在控制台,输入 npm/cnpm install , 若出现npm/cnpm 命令不可用, 说明win10下 控制台权限不足;win+R打开运行并输入cmd, 右键属性。在这里插入图片描述
    勾选箭头指示的选项,然后重启webstorm ,再次输入npm install 命令成功运行,项目目录会自动生成node_modules目录
    3.运行项目
    在这里插入图片描述

    展开全文
  • 一、搭建Vue开发环境 Vue.js是一套构建用户界面的渐进式框架。 1、安装Node.js(附带npm) Node.js就是运行在服务端的 JavaScript。 1.1 官网下载安装Node.js:https://nodejs.org/en/download/ 1.2 设置npm...

    系统:MacOS

    参考:

    搭建环境https://my.oschina.net/u/2464371/blog/3039914

    pathhttps://www.codenong.com/11025980/

    创建项目https://segmentfault.com/a/1190000007441374

     

     

    一、搭建Vue开发环境

    Vue.js是一套构建用户界面的渐进式框架。

    1、安装Node.js(附带npm)

    Node.js就是运行在服务端的 JavaScript。

    1.1 官网下载安装Node.js:https://nodejs.org/en/download/

    1.2 设置npm(随NodeJS一起安装的包管理工具)的默认安装路径和缓存路径

    # 查看用户配置
    npm config ls
    npm config list
    # 查看全部配置
    npm config ls -l 
    npm config list -l
    

    默认npm包安装目录为prefix = "/usr/local",因为安装时有可能出现权限不够无法安装。

    1. 修改npm安装程序时的默认位置 mkdir .nodejs npm config set prefix "/Users/danni/.nodejs"

    2. 设置npm安装程序时的缓存位置​npm config set cache "/xxx/xx" 缓存的默认位置为cache = "/Users/danni/.npm",在用户下,不存在权限问题,因此也可以不修改。

    3. 然后在把"/Users/danni/.nodejs"路径添加到环境变量PATH中

    cd
    vi .bash_profile
    export NODE_HOME="/Users/danni/.nodejs"
    export PATH=":$NODE_HOME/bin:$CNPM_HOME/bin:$M2_HOME/bin:$PATH"

    1.3 测试node安装:

    打开终端,输入node,出现>交互命令行,然后可以输入console.log("Hello,World");测试安装。 返回​Hello,World和undefined表示成功。

    > console.log("Hello,World");
    Hello,World
    undefined
    

    输入.exit退出node,查看node和npm的版本。

    node -v
    npm -v

    2、安装cnpm

    默认的npm包下载地址为registry = "registry https://registry.npmjs.org",在国外,速度较慢,可以用阿里定制的cnpm命令行工具代替默认的npm。

    # 安装cnpm
    npm install -g cnpm --registry=https://registry.npm.taobao.org --verbose
    # 修改配置为cnpm
    npm config set registry http://registry.cnpmjs.org
    # 复原
    #npm config set registry https://registry.npmjs.org
    

    可查看配置是否已修改npm config ls

    用户的配置会保存在/Users/danni/.npmrc文件中

    cnpm -v测试是否安装成功

    3、安装vue-cli

    4、安装vue和vuex

    cnpm install vue
    cnpm install vuex
    

    5、安装vue-cli脚手架

    cnpm install vue-cli -g

    6、配置环境变量

    刚才已配置export NODE_HOME="/Users/danni/.nodejs",确认/Users/danni/.nodejs/bin下有vue等执行文件即可。

    DannideMacBook-Pro:bin danni$ ls
    cnpm		vue		vue-init	vue-list
    

    7、查看版本,测试Vue是否搭建成功

    vue -V
    

    注意:V为大写;此为vue-cli版本,非vue版本。

     

    二、安装IDE(如:VSCode or WebStorm)

    官网下载

    注:webstorm没有社区版,需购买,目前如个人有开源软件,可向JetBrains申请一年的License,一年后再续期。

     

    三、导入工程项目

    1、把vue_web项目导入IDE

    打开VSCode/webstorm,File - Open打开即可。

    2、安装项目

    在项目所在目录下执行命令,生成node_modules目录。

    cnpm install
    

    3、运行项目

    方法一:

    • 在项目所在目录下执行命令。
    • cnpm run dev
    • 控制台输出访问地址,比如:http://localhost:8081

    方法二:

    • webstorm中配置Run - Edit Configurations - Add new configuration
    • 选择npm,package-.json选择项目中的package.json,script填写dev
    • 然后点击Run

    4、访问测试

    5、打包项目

    npm run build
    

    打包后生成dist目录。

    注意:提交代码时,不要上传node-modules、dist文件夹目录下的内容

     

    常用包安装

    可先安装,防止后续使用时缺少。如:

    • 单元测试mocha:cnpm install -g mocha
    • express框架:cnpm install -g express
    • 等等

     

     

    展开全文
  • webstorm vue开发配置

    万次阅读 2019-05-29 18:04:55
    下面开始使用WebStorm 重要的一点,想用WebStorm创建项目得安装git。 安装很简单,官网找到下载安装即可,否则可能出现安装不了的情况 红色为新建的顺序,绿色为node.js地址(装好了会自动寻找),蓝色为vue.js包的...
  • vue开发环境搭建(WebStorm

    万次阅读 2019-03-06 15:46:55
    一、安装Node.js,搭建Vue环境 1、访问Node.js官网(https://nodejs.org/en/download/)进行安装包下载。 2、下载成功之后运行安装程序,进行安装。 如果是用安装程序进行安装,在安装过程中会自动进行Nodejs环境...
  • windows系统搭建VUE环境我们用vue-cli创建好一个项目,如果我们使用Webstorm作为编码工具,会发现代码中有很多编辑器警告,这是因为默认情况下WebstormVue项目的支持不够造成的,为提高编程效率还要进行一些配置。...
  • 安装note.js环境 创建项目 vue init webpack myprojec  next 下一步 下一步 Use ESLint to lint your code? (Y/n);使用ESlint语法?N (因为在工程的时候缺少一个空格都编译不过) OK克欧克 打开项目 配置...
  • 官网下载nodejs安装包,默认安装NPM包管理器(国内使用npm需要FQ,也可以使用淘宝的镜像:npm install -g cnpm –registry=https://registry.npm.taobao.org)注:可修改node全局目录(nodejs正确安装及配置及npm...
  • Vue项目部署及使用WebStorm开发Vue

    千次阅读 2020-11-30 14:01:53
    博客内记录小白我在Vue项目部署与使用WebStorm开发Vue时的经验,包括搭建Vue环境,新建Vue项目,WebStorm相关配置配置路由,前后端对接 ,axios简单封装ajax,config配置等。详细内容会持续更新,如果写的有问题...
  • 说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径 1、鼠标右键"此电脑",选择“属性”菜单,在弹出的“系统”对话框中左侧选择“高级系统设置”,弹出“系统属性”对话框。...
  • 1:安装node 2:查看node的版本号 输入命令: node -v 出现版本号则...在main.js 配置 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 在App.vue测试 运行结果
  • node.js一种javascript的运行环境,能够使得javascript脱离浏览器运行,类似JVM之于java 从有了nodejs后就催生出一大批用js做后台开发的前端人员 NPM npm (Node Package Manager)是 JavaScript 世界的...
  • webstorm搭建vue项目(亲测,绝对实用)

    万次阅读 多人点赞 2020-03-19 23:14:37
    前提:已安装webstorm,这里主要讲搭建,webstorm的下载就不在这里说了。 1、了解一下基本知识 1.1、Node.js: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I...
  • webstorm搭建vue项目

    万次阅读 多人点赞 2018-04-15 21:25:47
    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。  Node.js 的包管理器 npm,是全球最大的开源库生态系统。 npm:   npm全称...
  • 1:webstorm的安装:2:node.js的安装3:安装Git4:vue-cli 安装前面两步就可以把项目启动了,安装Git主要是打开命令窗口,这样就可以用liunx命令了,原理跟cmd差不多 Vue.js是一套构建用户界面的 “渐进式框架”...
  • webstorm入门搭建vue

    2020-11-26 16:38:45
    背景: 新公司这边用的是vue+springboot的架构方式,以前从来没有接触过,这次在做一个demo前端用到vue,用了已经搭好的项目在上面改的,今天...2.vue环境安装 2.1、win+r,cmd进入dos命令框 2.2、首先运行安装webpack
  • webstormvue开发环境配置

    千次阅读 2018-03-25 18:26:01
    转载:https://blog.csdn.net/Nero__A/article/details/62228646
  • webstorm创建vue项目 一、版本 webstorm版本 2021.1.1 node 版本 14.16.0 vue.cli 版本 4.5.13 二、新建 1. create 选择自定义配置选项。(按上、下健切换选项,按空格键选择选项,按i键反选) 选择安装插件,说明...
  • 第一部分 安装nodejs nodejs官网 安装vue淘宝镜像 npm install -g vue –registry=https://registry.npm.taobao.org 安装webpack ...npm install webpack -g(-g代表全局安装,安装好...npm install vue-cli -g...
  • Vue 采用自底向上增量开发的设计。 Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。2016年,Vue同Angular、React形成三足鼎立的局面,让前端的开发者顾不暇接,今天我们就来了解...
  • webStrom调试debug vue + live edit Vue + Spring Boot 项目实战(二):使用 CLI 搭建 Vue.js 项目 Vue2.0 新手入门 — 从环境搭建到发布
  • WebStorm下搭建webpack+vue开发环境

    千次阅读 2019-06-01 09:22:55
    工具安装 首先安装一些必要的工具,由于npm的源都是在国外的地址,所以安装会比较慢,可以使用淘宝的国内镜像...2、然后安装全局vue-cli脚手架,用于帮助搭建所需的Vue开发模板框架。命令如下: cnpm install ...
  • 一、Vue.js简介以及搭建前期准备工作 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Vue.js 是一套构建用户界面的渐进式框架,搭建前期首先系统需要安装Node.js,npm(Node.js打包工具),Git代码管理工具。...
  • 随着vue在前端不断的壮大起来,越来越多的前端工程师使用vue了,作为大型项目的开发vue-cli是不二之选,所以这篇博客是为搭建vue-cli所写,想要搭建vue-cli项目就必须先有git,node.js,webpack, git地址:...
  • webstorm 通过vue-cli3 构建 项目(-)

    千次阅读 2019-08-15 14:28:12
    通过webstorm 新建一个项目 把项目添加到git仓库 新建一个仓库 2.把新建的仓库地址复制到此。项目搭建完成 增加vue.config.js // vue.config.js const path = require('path'); function resolve(dir) { ...
  • webStorm创建vue项目

    2019-11-27 14:48:32
    需要node.js环境 可以看我博文:https://mp.csdn.net/mdeditor/101055914 项目名不能有大写字母 |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-versi...

空空如也

空空如也

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

webstorm配置vue开发环境

vue 订阅