Web笔记 · · By/蜜汁炒酸奶

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是个代码风格管理工具,是用来统一代码风格的,并不会影响整体的运行,这也是为了多人协作。作为新手,由于不了解,这里就不用了。 若是选择使用将会进入如下分支: [infobg class="warning" showicon="no" title="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) 这个不用说,自己定义风格 [/infobg] 具体选择哪个因人而异吧  ,为测试我选择了标准风格。

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)

评论已关闭

example
C
蜜汁炒酸奶

当前处于试运行期间,可能存在不稳定情况,敬请见谅。

欢迎点击此处反馈访问过程中出现的问题