专栏首页WindCoderVuejs学习笔记-vue-cli

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 条评论
登录 后参与评论

相关文章

  • Dubbo入门-简易配置

    想看分布式的东西好久了,目前的公司用不到,只能自己去网上找相关的,看到最多的Dubbo,于是趁着今天有时间自己照着一些教程自己配置了个基础的demo,顺便放出来...

    汐楓
  • 最大流量和线性分配问题

    这里有一个问题:你的业务分配给承包商来履行合同。您可以浏览您的名单,并决定哪些承包商可以参与一个月的合同,你可以查看你的合同,看看哪些合同是一个月的任务。鉴于你...

    汐楓
  • CentOS安装LNMPA

    网上这类教程太多了,此处仅作为一个常用命令的记录,详细教程会在参考资料中给出地址,有兴趣的可以去看一下。

    汐楓
  • [问答] 为什么要用vue-cli3?

    其实这个问题主要是想了解vue-cli3与vue-cli2相比是否存在一些不得不升级的好处和优点?

    _sx_
  • vue实践之采用vue-cli3.x创建项目

    vue.js 官方文档 https://cn.vuejs.org/v2/guide/

    陨石坠灭
  • 创建vue项目的几种方式

    最近一段时间在学习vuejs和element-ui、iview-ui这些前端知识,在创建vuejs项目时发现有几种不同的方法:

    ccf19881030
  • Vue 3.0将正式发布,对我们有哪些改变?

    那么我们今天就带着大家了解下 vue3.0,到底进化了什么,会对我们的开发有什么影响?

    前端迷
  • 【程序源代码】Vue开源项目库汇总

    最近在学习VUE,感觉确实不错的前端框架。但光学习基本有点太慢,时间太长,主要是为了项目上手使用,所以在网上找了找比较好的VUE框架开发的项目实例。分享给大家。...

    程序源代码
  • 12 手写配置启动一个 vue2 项目

    2019年10月5日,vue 团队发布了 Vue3.0 预览版源码,预计到 2020 年第一季度将发布 3.0 正式版。3.0 包涵了许多激动人心的新特性。

    李艺
  • 前后端通吃,vue大全Mark一下

    仓库地址:https://github.com/opendigg/awesome-github-vue

    java乐园

扫码关注云+社区

领取腾讯云代金券