千呼万唤始出来!一键构建Vue-TypeScript应用

A simple TypeScript CLI for scaffolding Vue.js projects.

Installation

Prerequisites: Node.js (>=4.x, 6.x preferred), npm version 3+ and Git.

$ npm install -g vue-cli

Usage

vue init SimonZhangITer/vue-typescript-template <project-name>

Example:

$ vue init SimonZhangITer/vue-typescript-template my-project

The above command pulls the template from here, prompts for some information, and generates the project at ./my-project/.

Demo

i wrote a vue-typescript-demo project for practice, it recorded how I configured it and how to use vue.js with typescript

In Addition

vuex

add vuex option at initialization time, it will create src/store folder, and it had configed, like this:

src
├──store
   ├──actions.ts
   ├──mutations.ts
   ├──getters.ts
   ├──types.ts

vue-class-component

add vue-class-componet by default, and vue perfect support for it, it will make your code more flat and beautiful, you will like it.

  • npm run dev: first-in-class development experience.

    • Webpack + vue-loader for single file Vue components.
    • State preserving hot-reload
    • State preserving compilation error overlay
    • Lint-on-save with ESLint
    • Source maps
  • npm run build: Production ready build.

    • JavaScript minified with UglifyJS v3.
    • HTML minified with html-minifier.
    • CSS across all components extracted into a single file and minified with cssnano.
    • Static assets compiled with version hashes for efficient long-term caching, and an auto-generated production index.html with proper URLs to these generated assets.
    • Use npm run build --reportto build with bundle size analytics.
  • npm run unit: Unit tests run in JSDOM with Jest, or in PhantomJS with Karma + Mocha + karma-webpack.

    • Supports ES2015+ in test files.
    • Easy mocking.
  • npm run e2e: End-to-end tests with Nightwatch.

    • Run tests in multiple browsers in parallel.
    • Works with one command out of the box:
      • Selenium and chromedriver dependencies automatically handled.
      • Automatically spawns the Selenium server.
原文链接:github.com

上一篇:canvas炫酷粒子特效
下一篇:基于canvas使用粒子拼出你想要的文字

相关推荐

  • 首个使用 Weex 和 Vue 开发的 Hacker News 原生应用

    首个使用 Weex 和 Vue 开发的 Hacker News 原生应用。 预览 用 Weex Playground App 扫描下方二维码即可。 项目使用的 Hacker News API 是由 ...

    3 年前
  • 面试官问你有没有了解过 vue-cli 构建的打包工程

    前言 使用过 vue 进行项目开发的同学,一定知道或者使用过 vue-cli 脚手架,他能够很好的搭建项目结构和工程,让我们能够把足够的精力放在业务开发上。也正是因为这样,很多时候我们会因为项目工期短...

    3 年前
  • 重磅!尤雨溪发布Vue 3.0开发路线

    作者|尤雨溪译者|无明编辑|覃云 在上周的 Vue.js 伦敦大会上,尤雨溪简要介绍了 Vue 下一个主要版本要发布的内容,9 月 30 日,尤雨溪在 medium 个人博客上发布了 Vue 3.0 ...

    2 年前
  • 重磅!Vue CLI 3.0正式发布,带来多项重大更新

    编译|覃云近日,Vue 的作者尤雨溪在 Medium 上宣布正式发布 Vue CLI 3.0,它也将为很多开发者带来期待已久的新特性。丰富的内置功能 尤雨溪表示,Vue CLI 3.0 与其他的版本完...

    2 年前
  • 通过npm引用的vue组件使用详解

    什么是组件:组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。

    4 年前
  • 适用于 Vue 2.0 的功能强大的 Contextmenu 组件

    适用于 Vue 2.0 的 ContextMenu 组件。 中文 | English 安装 $ yarn add v-contextmenu # npm i -S v-contextmenu概览 ...

    3 年前
  • 说说我眼中的Vue和React

    前序 我最早接触的是reactjs,时间是在2016年,当时主要从官网学习,并且写了一些笔记。坦白讲,当时学习了一段时间,只是对里面的概念有点印象而已。也搞不懂怎么去具体的使用在项目里面,里面的思...

    3 年前
  • 详解在Vue中通过自定义指令获取dom元素

    vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的;  在 vue.js 中,获取某个DOM Elem...

    4 年前
  • 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件

    按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,...

    4 年前
  • 详解vue父子模版嵌套案例

    这里是父子模版的调用 这里是针对于vue1.0,如果要学2.0,建议大家去看官方文档 vue2.0 :http://vuefe.cn/guide/ vue-router2.0: https://rou...

    4 年前

公众号

欢迎 JavaScript 爱好者