webstorm建立vue-cli脚手架的傻瓜式教程

webstorm 文件 -> new -> project

1、尽量不要勾选 Use the default project setup (babel, eslint) 默认建立的项目好多的配置不全，后期再装很麻烦。

2、点击 create 后出现以下选项，按键盘上下键选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了（注：现在vue-cli3.0默认使用yarn下载），这里我选择手动

3、选择配置，这时你会看见一些选项，你要集成什么就选就行了，我这里选个我比较常用的（注：空格键是选中与取消，A键是全选），这里有些选项可能看不见，移动上下键也不行，需要将选项边框网上拉才可以显示全。

4、选择合适的 vue.js 版本开始这个项目，这里我选 3.x

5、是否使用babel做转义 yes

6、是否使用class风格的组件语法 yes

7、是否使用history模式

8、选择预处理的模式 这里我选 dart-sass ，与 node-sass 区别

  • node-sass 是用 node(调用 cpp 编写的 libsass)来编译 sass；
    dart-sass 是用 drat VM 来编译 sass；node-sass是自动编译实时的，dart-sass需要保存后才会生效
  • 推荐 dart-sass 性能更好（也是 sass 官方使用的），而且 node-sass 因为国情问题经常装不上

9、Pick a linter / formatter config: (Use arrow keys)：选择语法检测规范 这里我选择 ESLint +Prettier

10、保存就检测 和 fix和commit时候检查 这里我选择第一个

11、放独立文件夹 与 放 package.json 。这里看自己喜欢哪个，这里我选的是 放独立文件夹

12、是否记录一下以便下次继续使用这套配置 .键入N不记录，如果键入Y需要输入保存名字

13、静静等待完成即可，如果时间比较长的话你可以去睡一觉。直到页面出现 Done 你就可以起来搬砖了。

到此这篇关于webstorm建立vue-cli脚手架的傻瓜式教程的文章就介绍到这了,更多相关webstorm建立vue-cli脚手架内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue-cli脚手架的安装教程图解

    vue-cli脚手架的安装教程图解

    vue-cli脚手架模板是基于node下的npm来完成安装,下面给大家介绍vue-cli脚手架的安装,具体内容如下所述: https://github.com/vuejs/vue-cli  官网 使用官方推荐的webpack 条件: node在4.以上,npm在3以上,查看版本号打开cmd输入,node -v npm -v; 安装步骤: 1.cmd打开命令行窗口 2.输入npm install vue-cli -g,然后回车等待 3.安装结束后输入vue 查看是否安装成功 4.运行vueinit

  • vue-cli脚手架config目录下index.js配置文件的方法

    此文章介绍vue-cli脚手架config目录下index.js配置文件 1.此配置文件是用来定义开发环境和生产环境中所需要的参数 2.关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看 3.上代码 // see http://vuejs-templates.github.io/webpack for documentation. // path是node.js的路径模块,用来处理路径统一的问题 var path = require('path')

  • 在vue-cli脚手架中配置一个vue-router前端路由

    前言 这篇文章给大家讲解的是在vue-cli脚手架中如何配置vue-router前端路由的相关内容,分享出来供打击参考学习,下面来一起看看详细的介绍: 首先你需要一个main.js文件 //然后引入vue-router import VueRouter from 'vue-router'; //使用路由 Vue.use(VueRouter); //当然如果需要有组件进来的时候也是需要引入的 import Home from '../components/Home.vue'; import New

  • 仿vue-cli搭建属于自己的脚手架的方法步骤

    脚手架是啥 从前我总觉得脚手架是个很高大上的东西,好像得牛叉:ox:一点的人才写的出来,可望而不可即.其实并不是因为困难使我们放弃,而是因为放弃才显得困难(这是个好词好句:see_no_evil:).只要你肯花个一天半天的时间:fist:,也能写出属于你自己的脚手架. 早前脚手架这个词是从 vue-cli 这里认识的,我们通过 npm install -g vue-cli 命令全局安装脚手架后, 再执行 vue init webpack project-name 就能初始化好一个自己的项目,真是

  • 浅谈VUE-CLI脚手架热更新太慢的原因和解决方法

    用vue-cli构建了项目之后在webstorm开发,用npm run dev跑本地服务,经常修改之后在浏览器刷新没反应,偶尔才会有刷新,需要重新跑一遍npm run dev才会更新,这是怎么回事呢? 解决方法 webstorm保存的时候会先保存到旧时文件中,其实并没有真正保存,要在setting->stystem settings下的"use save write"去掉 以上这篇浅谈VUE-CLI脚手架热更新太慢的原因和解决方法就是小编分享给大家的全部内容了,希望能给大家一个参

  • 详解如何使用vue-cli脚手架搭建Vue.js项目

    详解如何使用vue-cli脚手架搭建Vue.js项目

    1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev 后面分步说明. 2. 安装 前提条件,Node.js >=4.x版本,建议使用6.x版本.npm版本 > 3.x 全局安装vue-cli $ npm install -g vue-cli 3. 使用 $ vue init

  • vue-cli3.0 脚手架搭建项目的过程详解

    1.安装vue-cli 3.0 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) 2.命令变化 vue create --help 用法:create [options] <app-name> 创建一个由 `vue-cli-service` 提供支持的新项目 选项: -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项   -d

  • 详解vue-cli 脚手架项目-package.json

    使用vue-cli脚手架新建的项目中,含有package.json. package.json是npm的配置文件,里面设定了脚本以及项目依赖的库. npm run dev 这样的命令就写在package.json里. { "name": "vue-manage", // 项目名称 "version": "1.0.0", // 版本 "description": "Reimbursement Man

  • 解决vue-cli脚手架打包后vendor文件过大的问题

    大家会遇到打包后文件很大,导致页面初始化加载的速度很慢.会出现白屏的现象.这一般是你打包的vendor太大的缘故.如果你打包后看到你的vendor文件有700kb以上.你就要考虑怎么处理. 处理这种文件的 1.把不常改变的库放到index.html中,通过cdn引入,比如下面这样: <script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script> <script src="https:

  • vue-cli3脚手架的配置及使用教程

    这次给大家带来vue-cli3.0配置及使用详解,写给需要的朋友. Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service),该依赖:一个丰富的官方插件集合,集成了前端生态中最好的工具. 可升级: 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行

随机推荐