Vuejs学习笔记-vue-cli

前言

这篇使用vue构建工具vue-cli创建vue项目的本应该是在基础篇发完之后的，无奈基础篇有点久了，先把今天学的记录下。

本系列中所有npm由于众所周知的原因，均可替换为cnpm。vue内容基于vue2.x。

vue-cli

1、全局安装 vue-cli

npm install --global vue-cli

亦可简写为：

npm install -g vue-cli

2、创建一个基于 webpack 模板的新项目

本身vue创建项目命令为

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

其中 template官网模板如下：

• 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.
• pwa - PWA template for vue-cli based on the webpack template
• simple - The simplest possible Vue setup in a single HTML file

如：

vue init webpack my-project(项目名称)

以下使用vue init webpack helloVue为例， 命令输入后，会进入安装阶段，需要用户输入一些信息。

Project name (hellovue) ：hellovue

项目名称，可以自己指定，也可直接回车，按照括号中默认名字。

名字中不可以有大写字母 ，若存在会报如下错误：Sorry, name can no longer contain capital letters

Project description (A Vue.js project)

项目描述，可直接回车，使用默认名。

Author (........)  windCoder

作者，这个。。写什么看你心情

模式选择

上面完成后会出现个模式选择题，可按键盘的上下箭头选择。

• Runtime + Compiler: recommended for most users
• Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere

第一个为 运行加编译，第二个为 仅运行时， 既然已经说了推荐第一个，就默认直接选了它。

Install vue-router? (Y/n)

是否安装vue-router，这是官方的路由，大多数情况下都使用，vue-router官网 。这里输入“y”后回车即可

当然也可以输入n,之后自己做路由。

Use ESLint to lint your code? (Y/n)

是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，并不会影响整体的运行，这也是为了多人协作。作为新手，由于不了解，这里就不用了。

若是选择使用将会进入如下分支：

ESLint选择分支

Pick an ESLint preset (Use arrow keys)

Standard (https://github.com/feross/standard)  

标准，有些看不明白，什么标准呢，去给提示的standardgithub地址看一下， 原来是js的标准风格

AirBNB (https://github.com/airbnb/javascript)  

JavaScript最合理的方法，这个github地址说的是JavaScript最合理的方法

none (configure it yourself)

这个不用说，自己定义风格

具体选择哪个因人而异吧  ，为测试我选择了标准风格。

Setup unit tests with Karma + Mocha? (Y/n)

是否安装单元测试，不了解可以选N

Setup e2e tests with Nightwatch(Y/n)?

是否安装e2e测试，同上不了解可选N

#安装依赖

安装好后进入项目文件夹

#进入项目目录
cd my-project
#安装依赖
npm install

本示例中是

cd helloVue
npm install

#运行

npm run dev

一切顺利的话，等段时间就会自动在默认浏览器中打开类似http://localhost:8080/#/的页面。

Vuejs学习笔记-vue-cli

附录

安装生产环境中的依赖环境

npm install --production

可用于npm install之后，用于安装在生产环境中的依赖环境。即package.json文件中dependencies里设置的的依赖环境。

目录结构

build

构建脚本目录

config

构建的配置文件

src

源码目录

static

静态资源目录

选择与否ESLint及测试工具的效果截图

Vuejs学习笔记-vue-cli

选择ESLint及测试工具的效果截图

Vuejs学习笔记-vue-cli

不选择ESLint及测试工具的效果截图

参考资料

vue-命令行工具

基于vue-cli快速构建

vue.js 2.0开发(4)