vue-cli 2.0

安装vue-cli

npm install -g vue-cli

创建一个项目模板

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

template-name:

  1. wepack 功能齐全的Webpack + vue-loader设置,具有热重载,linting,测试和css提取功能。
  2. webpack-simple 一个简单的Webpack + vue-loader设置,用于快速原型设计
  3. browserify 全功能的Browserify + vueify设置,具有热重载,linting和单元测试功能。
  4. browserify 一个简单的Browserify + vueify设置,用于快速原型设计
  5. pwa 基于vue webpack 模板的pwa模板
  6. simple 最简单的vue单页面项目

用例:

vue init webpack projectName(一般情况下都是用webpack模板)

完整用例-初始化一个vue的webpack项目myProject

1.安装模板
vue init webpack myProject
2.进入myProject文件夹
cd myProject
3.安装项目依赖包
npm install
4.启动项目
npm run dev

vue-cli 3.0

安装 @vue/cli

npm install -g @vue/cli

安装完成后运行以下命令查看安装是否成功:

vue --version

创建一个项目myProject

vue create myProject

查看帮助

vue create --help

使用图形化界面

你也可以通过vue ui命令以图形化界面创建和管理项目:

vue ui

在3.x使用2.x的模板

安装一个全局桥接工具拉取2.x的模板

npm install -g @vue/cli-init
vue init webpack myProject

插件

Vue CLI 使用了一套基于插件的架构,插件可以修改 webpack 的内部配置,也可以向 vue-cli-service 注入命令。在项目创建的过程中,绝大部分列出的特性都是通过插件来实现的。

插件安装

vue add @vue/eslint
# 等价于
vue add @vue/cli-plugin-eslint 你也可以基于一个指定的 scope 使用第三方插件。例如如果一个插件名为 @foo/vue-cli-plugin-bar,你可以这样添加它: vue add @foo/bar
你可以向被安装的插件传递生成器选项 (这样做会跳过命令提示): vue add @vue/eslint --config airbnb --lintOn save
vue-router 和 vuex 的情况比较特殊——它们并没有自己的插件,但是你仍然可以这样添加它们: vue add router
vue add vuex

vue-cli的使用指南的更多相关文章

  1. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  2. vue入门|ElementUI使用指南

    vue入门|ElementUI使用指南 1.开发前务必熟悉的文档: vue.js2.0中文,项目所使用的js框架 vue-router,vue.js配套路由 vuex 状态管理 Element UI框 ...

  3. Vue CLI 介绍安装

    https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...

  4. 快速上手最新的 Vue CLI 3

    翻译:疯狂的技术宅 原文:blog.logrocket.com/getting-sta- 概要:本文将指导你快速上手 Vue CLI 3,包括最新的用户图形界面和即时原型制作功能的使用步骤. 介绍 尤 ...

  5. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  6. @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

    目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...

  7. vue cli使用融云实现聊天

    公司有个项目要实现一个聊天功能,需求如下图,略显随意 公司最终选择融云这个吊炸天的即时通信,文档详细的一匹,刚开始看文档感觉很详细实现起来也不麻烦,有很多开源的demo可以在线演示和下载 不过我们的项 ...

  8. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  9. Vue CLI 3使用:浏览器兼容性

    package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器的范围.这个值会被 @babel/preset-env ...

  10. 基于vue cli 3.0创建前端项目并安装cube-ui

    前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...

随机推荐

  1. Docker学习のDocker的简单应用

    一.常见基本docker命令 docker是在一个linux虚拟机上运行的(对于windows来说),打开Docker quickStart terminal,就连街上了docker的 daemon ...

  2. SQL Server实现跨库查询(跨库select insert)

    方法一: select  * from servername.dbo.tablename 方法二: select * from OPENDATASOURCE(         'SQLOLEDB',  ...

  3. iOS开发系列-异常处理

    概述 在开发中经常调用苹果的API遇到数组越界.实例方法不存在运行时等致命错误,此时程序直接奔溃.其实苹果是在函数内部抛出了一个异常.这样告诉开发者需要检查代码做修改.同样在我们自己封装一些框架或者功 ...

  4. adb命令 查看运行APP当前页面的Activity名称

    命令 adb shell "dumpsys window | grep mCurrentFocus" 结果

  5. csp-s模拟9697题解

    题面:https://www.cnblogs.com/Juve/articles/11790223.html 96: 刚一看以为是水题,直接等差数列求和就好了,然后发现模数不是质数,还要1e18*1e ...

  6. docker删除未使用到的镜像

    docker image prune -a docker image prune -a -f  #-f强制,不需要确认

  7. Ubuntu-WPS无法输入中文

    WPS无法输入中文 原因:环境变量未正确设置 $ vi /usr/bin/wps,添加以下内容: #!/bin/bash export XMODIFIERS="@im=fcitx" ...

  8. duilib教程之duilib入门简明教程9.界面布局

    上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的位置会跟着变化,这是因为我们将按钮放到了HorizontalLayout.VerticalLayout,这样 ...

  9. Visual Studio上开发Python六大功能

    Visual Studio上开发Python六大功能 一.整合 Python 直译器 (Interpreter) & 互动视窗 (Interactive) Visual Studio 高度整合 ...

  10. System.Math.cs

    ylbtech-System.Math.cs 1. 程序集 mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c56193 ...