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. 2018-2019-2 20165330《网络对抗技术》Exp9 Web安全基础

    目录 基础问题 实验目的 实验内容 实验步骤 实验总结与体会 实验目的 本实践的目标理解常用网络攻击技术的基本原理. 返回目录 实验内容 WebGoat准备工作 SQL注入攻击 命令注入(Comman ...

  2. Nginx-HTTP之ngx_http_top_body_filter

    1. ngx_http_top_body_filter 该链表用于构造响应消息的响应正文. 大致有以下模块在该链表中插入了自己的函数: ngx_http_range_filter_module: ng ...

  3. 【软件工程】Alpha事后诸葛亮

    链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 参考邹欣老师的问题模板进行总结思考 一.设想和目标 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的 ...

  4. sklearn——train_test_split 随机划分训练集和测试集

    sklearn——train_test_split 随机划分训练集和测试集 sklearn.model_selection.train_test_split随机划分训练集和测试集 官网文档:http: ...

  5. synchronized对象解析

    package com.haiyisoft.hyoaPc; public class Test7 { public static void main(String[] args) throws Int ...

  6. chrome新版本flash无法在http网站上运行的解决办法

    最近遇到一个问题,就是用chrome浏览器打开网站后台以后,使用flash插件上传文件失败,提示flash初始化失败,于是打开chrome的内容设置,准备启用flash功能,打开浏览器,在地址栏中输入 ...

  7. Android studio怎么使用git代码文件逐行追溯

    在Android studio中集成了相当多的工具用于管理代码,应该现在经常使用的git的方式来管理管理,用于上传代码或者进行下载代码库中,而在git中进行管理的话,那么就可以进行历史的记录信息,如果 ...

  8. 06 MySQL之索引

    01-索引 1.索引是对数据库表中一列或多列的值进行排序的一种数据结构,使用索引可提高数据库中特定数据的查询速度. 2.索引是一个单独的.存储在磁盘上的数据库结构,包含对数据表里所有记录的引用指针. ...

  9. [z]curl使用指南

    https://www.jianshu.com/p/fc0eb6c60816 curl -X POST "http://aa/bb/cc" -H  "accept:*/* ...

  10. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-9.使用JWT生成用户Token回写客户端

    笔记 9.使用JWT生成用户Token回写客户端     简介:讲解用户授权登录后,需要生成登录凭证重定向到页面上 1.获取当前页面访问地址 2.根据User基本信息生成token 3.重定向到指定页 ...