vue-cliVue 官方出品的快速构建单页应用的脚手架, 相当于 React 官方出品的 create-react-app , 下面演示 vue-cli 基本用法:

1. 全局安装 vue-cli, 这里使用 cnpm 进行安装, 没有安装 cnpm 可是看: 这里

$ cnpm install -g vue-cli

2. 安装后, 我们使用下面的命令初始化一个 vue 项目, 执行期间一律按 回车

$ vue init webpack my-project

如果没有安装 webpack, 可以使用 cnpm 进行安装

3. 完成后, 按照命令行里的提示, 我们需要切到 ./my-project 目录下, 然后加载依赖包: cnpm install

$ cd ./my-project
$ cnpm install

注意, 这里使用 npm install 也是可以的, 但会很慢, 所以建议使用 cnpm

4. 运行 cnpm run dev 启动项目, 出现下面指示时, 表示已经启动成功.

$ cnpm run dev

5. 打开浏览器, 输入 localhost:8080 即可查看已启动的项目

怎样使用 vue-cli ( Vue 脚手架 )的更多相关文章

  1. vue cli & vue 3.x

    vue cli & vue 3.x https://cli.vuejs.org/dev-guide/ui-api.html#ui-api https://cli.vuejs.org/zh/gu ...

  2. vue cli创建脚手架

    1.用vscode打开一个文件夹.在菜单栏 点击 查看-集成终端.这里可以用其他的方法比如cmd命令符调开这个界面,但是要用cd 切到要放文件的文件夹下. 2.安装好node.js  和淘宝镜像 3. ...

  3. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  4. Vue CLI 3+tinymce 5富文本编辑器整合

    基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...

  5. vue cli 3

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

  6. Vue Cli安装以及使用

      因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...

  7. vue学习笔记——脚手架安装

    项目启动:npm run build 脚手架 vue cli vue cli --2 安装命令 #全局安装 npm install --global vue-cli #卸载vue-cli  npm u ...

  8. Vue CLI 介绍安装

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

  9. 【vue】---- 新版脚手架搭建项目流程详解

    一.概述 本文将介绍vue项目完整的搭建流程,在使用新版本的脚手架基础上,进行了一系列的完善和配置.主要内容如下: 1.项目初始化 安装脚手架 创建项目 项目结构 2.项目搭建配置 引入第三方插件 路 ...

  10. Vue CLI 是如何实现的 -- 终端命令行工具篇

    Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ...

随机推荐

  1. Mybatis-Plus BaseMapper自动生成SQL及MapperProxy

    目录 Spring+Mybatis + Mybatis-Plus 自定义无XML的sql生成及MapperProxy代理生成 问题产生背景 框架是如何使用 无Xml的SQL是如何生成生成及SQL长成什 ...

  2. div设置百分比高度 宽度

    给div按百分比设置高度 宽度两种方法: 第一种是给body标签设置他的高度值,xxxpx,div就会根据body的像素值取百分比: 第二种方法就是在div属性中加入 position:absolut ...

  3. 以下示例使用一个 x,y 坐标列表创建了一个多边形几何对象。然后使用裁剪工具来裁剪具有多边形几何对象的要素类。

    import arcpy # Create an Array object. # array = arcpy.Array() # List of coordinates. # coordList = ...

  4. JS初探

    如何实现点击后,有下拉菜单的效果呢? 写一个JS效果的步骤: 一.先实现布局 二.实现原理 三.了解JS语法 1.JS获取效果元素 2.知道是什么事件(鼠标事件.键盘事件.表单事件.系统事件.自定义事 ...

  5. P4124 [CQOI2016]手机号码

    P4124 [CQOI2016]手机号码 题解 数位DP   DFS  虽然套路,但还是恶心到找不到锅在哪里 注意这个 然后你就发现其实这样就不用记录前导0了 锅在这个鬼地方QAQ 代码 #inclu ...

  6. C++ STL——输入输出流

    [TOC] 注:原创不易,转载请务必注明原作者和出处,感谢支持! 注:内容来自某培训课程,不一定完全正确! 一 缓冲区 (1)标准输入:从键盘输入数据到程序(input) (2)标准输出:程序数据输出 ...

  7. LVS集群

    集群: 将许多小的,性能较低的服务器做成一个大的性能高的超级服务器 集群分为负载均衡集群,高可用集群,高性能运算集群 LVS体系结构与工作原理描述 LVS集群负载均衡器接受服务的所有入站客户端计算机请 ...

  8. IDEA快捷键(修改成eclipse版)+Templates

    快捷键:使用快捷键需要下载改建的配置文件,默认eclipse版的按键还是不全的. 链接:https://pan.baidu.com/s/17H4tFh__k6rExGpAf8NRJg 密码:rnl3 ...

  9. c/c++编码规范(1)--头文件

    最近工作稍微轻松一点,就再学习了一下编码规范.遂记些笔记,以便查阅. 这次学习的是Google 开源项目风格指南中文版,地址是:http://zh-google-styleguide.readthed ...

  10. wdScrollTab

    wdScrollTab是一个采用jQuery实现的Tab面板,当标签太多超出页面时会自动滚动.支持iframe.ajax调用和动态加载内容.