Web笔记 ·

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)

参与评论

  • 素材火

    很好的入门教程,值得学习

    1年前 (2018-06-07)
    回复
    回复素材火
  • 13641269882@163.com

    推荐一个vue工程化实践教程:[鉴于存在广告性质,暂时给予屏蔽]

    2年前 (2018-04-11)
    回复
  • 汐枫

    感觉您的到来,但鉴于您发布的链接存在广告性质,暂时给予屏蔽,如需恢复,请说明相关缘由。
    Email:windcoderz@foxmail.com,QQ:2641914215

    2年前 (2018-04-12)
    回复
    回复汐枫
  • 715560471@qq.com

    这个教程简洁而充实,适合新手入门

    2年前 (2017-07-06)
    回复
  • 汐枫

    谢谢支持,本身我也是新手~

    2年前 (2017-07-06)
    回复
    回复汐枫