vue-cli使用

blob.png
使用脚手架工具 vue-cli 可以快速地构建项目:单文件 Vue 组件,热加载,保存时检查代码,单元测试等。

Installation

Prerequisites: Node.js (>=4.x, 5.x preferred) and Git.

$ npm install -g vue-cli

Usage

$ vue init <template-name> <project-name>

Example:

$ vue init webpack my-project

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

Official Templates

The purpose of official Vue project templates are to provide opinionated, battery-included development tooling setups so that users can get started with actual app code as fast as possible. However, these templates are un-opinionated in terms of how you structure your app code and what libraries you use in addition to Vue.js.

All official project templates are repos in the vuejs-templates organization. When a new template is added to the organization, you will be able to run vue init <template-name> <project-name> to use that template. You can also run vue list to see all available official templates.

Current available templates include:

  • webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

  • webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

  • browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.

  • browserify-simple - A simple Browserify + vueify setup for quick prototyping.

  • simple - The simplest possible Vue setup in a single HTML file


搭建官方项目模板步骤: 


  1、npm install  vue-cli (安装vue-cli )  有的时候有看到其它两种写法:  --save-dev 和 --save的写法。这两个有一定的区别,我们都知道package.json  中有一个 “dependencies” 和 “devDependencies” 的。dependencies 是用在开发完上线模式的,就是有些东西你上线以后还需要依赖的,比如juqery , 我们这里的vue 和 babel-runtime(Babel 转码器 可以将ES6 转为ES5 ), 而devDependencies 则是在开发模式执行的,比如我们如果需要安装一个node-sass 等等。有的时候看到package.json中安装的模块版本号前面有一个波浪线。例如: ~1.2.3 这里表示安装1.2.x以上版本。但是不安装1.3以上。


  2、vue init webpack-simple yourdemoname  下载一个webpack-simple项目,这里的webpack-simple 是固定的,也就是官网的项目模板。youdemoname 这个是你自己项目的名字。 执行这个步骤以后。就会弹出询问 “项目名称..项目描述“等等问题 直接按照提示操作。这个时候对应的项目目录下就出现刚刚建立的项目了。


  3、我们还需要把项目的依赖下载下来。使用命令:  cd youdemoname 然后执行npm install 就可以了,这个时候你的项目中有多了一个node_modules 目录


  4、使用"npm - run - dev" 命令来运行项目 "npm-run-bulid" 来执行发布,会自动生成dist文件

修改时间 2016-10-03

真诚赞赏,手留余香
赞赏
随机推荐
PHP 一次查询生成二维 Json
PS手绘20171008
Apache Rewrite实现URL的跳转和域名跳转
20170120 数位板 进步
字段别名不能直接在谓词部分引用
解决Mysql Workbench的Error Code: 1175错误
Windows下Apache开启rewrite
360曾经提供的php通用安全防护代码
高清 MKV 免重编码快速转换成 mp4 格式
Nodejs进阶:MD5入门介绍及crypto模块的应用