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/#/的页面。

附录

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

npm install --production

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

目录结构

build

构建脚本目录

config

构建的配置文件

src

源码目录

static

静态资源目录

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

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

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

参考资料

vue-命令行工具

基于vue-cli快速构建

vue.js 2.0开发(4)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android开发指南

eclipse使用和快捷键

4129
来自专栏web开发

前后端分离ueditor富文本编辑器的使用-Java版本

最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的u...

1K9
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery 前情回顾 在上一篇博文中,我们讲到了,...

2017
来自专栏小程序容器

OpenApplus小程序容器

OpenApp+ (https://www.openapplus.com)一个小程序容器,配置简单、功能完善、界面流畅、开箱即用!使用OpenApp+可以快速扩...

5079
来自专栏数据小魔方

Excel多工作薄合并

今天要给大家介绍一下Excel多工作表合并的技巧! 由于Excel工作薄文件可以包含多个工作表,所以合并起来要比Word麻烦! 目前还无法单纯通过Excel界面...

3006
来自专栏软件开发

Node.js开发Web后台服务

一、简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/...

1.1K9
来自专栏Jackson0714

30分钟全面解析-图解AJAX原理

37912
来自专栏技术博客

ExtJs九(ExtJs Mvc用户管理之一)

首先要做的是为用户信息创建一个模型,在Scripts\app\model目录下创建一个名为User.js的文件,然后添加以下模型定义代码:

1062
来自专栏西安-晁州

vuejs、eggjs、mqtt全栈式开发设备管理系统

vuejs、eggjs、mqtt全栈式开发简单设备管理系统 业余时间用eggjs、vuejs开发了一个设备管理系统,通过mqtt协议上传设备数据至web端实时展...

2.4K7
来自专栏Kotlin源码阅读

Kotlin源码阅读——system模块

在kotlin的源码目录里,每个模块都有相应的md文件,做以说明。在kotlin最主要的stdlin/src目录下有一个Module.md:

1553

扫码关注云+社区