安装vue-cli

  1. C:\Users\fei>npm install -g vue-cli
  2. npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coff
  3. eescript" (no hyphen)
  4. D:\nodes\node_cache\vue-init -> D:\nodes\node_cache\node_modules\vue-cli\bin\vue
  5. -init
  6. D:\nodes\node_cache\vue -> D:\nodes\node_cache\node_modules\vue-cli\bin\vue
  7. D:\nodes\node_cache\vue-list -> D:\nodes\node_cache\node_modules\vue-cli\bin\vue
  8. -list
  9. + vue-cli@2.9.6
  10. added 239 packages in 79.481s

相关命令

  查看版本信息和帮助信息

  1. C:\Users\fei>vue -V
  2. 2.9.6
  3.  
  4. C:\Users\fei>vue --help
  5. Usage: vue <command> [options]
  6.  
  7. Options:
  8. -V, --version output the version number
  9. -h, --help output usage information
  10.  
  11. Commands:
  12. init generate a new project from a template
  13. list list available official templates
  14. build prototype a new project
  15. create (for v3 warning only)
  16. help [cmd] display help for [cmd]

  查看模板信息

  1. C:\Users\fei>vue list
  2.  
  3. Available official templates:
  4.  
  5. browserify - A full-featured Browserify + vueify setup with hot-reload, li
  6. nting & unit testing.
  7. browserify-simple - A simple Browserify + vueify setup for quick prototypi
  8. ng.
  9. pwa - PWA template for vue-cli based on the webpack template
  10. simple - The simplest possible Vue setup in a single HTML file
  11. webpack - A full-featured Webpack + vue-loader setup with hot reload, lint
  12. ing, testing & css extraction.
  13. webpack-simple - A simple Webpack + vue-loader setup for quick prototyping
  14. .
  15. # 切换到指定目录
  16.  
  17. C:\Users\fei>cd E:\前\vue\vue学习\第一个vue-cli项目
  18.  
  19. C:\Users\fei>e:
  20.  
  21. E:\前\vue\vue学习\第一个vue-cli项目>

  项目生成

  1. E:\前\vue\vue学习\第一个vue-cli项目>vue init webpack-simple myProject
  2.  
  3. ? Project name 01
  4. ? Project description A Vue.js project
  5. ? Author 张亚飞 <1271570224@qq.com>
  6. ? License MIT
  7. ? Use sass? No
  8.  
  9. vue-cli · Generated "myProject".
  10.  
  11. To get started:
  12.  
  13. cd myProject
  14. npm install
  15. npm run dev 

如果报错

  1. > cross-env NODE_ENV=development webpack-dev-server --open --hot
  2.  
  3. 'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序
  4. 或批处理文件。
  5. events.js:167
  6. throw er; // Unhandled 'error' event
  7. ^

解决方案

  1. npm install webpack-cli@3.0.0 -g 

vue开源项目汇总

  1. https://github.com/opendigg/awesome-github-vue

  

vue-cli项目生成的更多相关文章

  1. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  2. vue cli 项目的提交

    前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 ...

  3. vue.cli项目中src目录每个文件夹和文件的用法

    assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:

  4. Vuex内容解析和vue cli项目中使用状态管理模式Vuex

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

  5. Vue cli项目开启Gzip

    目录 安装 compression-webpack-plugin 更改配置文件 服务器开启gzip功能 安装 compression-webpack-plugin 建议安装v1.1.11版本,最新版本 ...

  6. vue/cli项目添加外部js文件的一个方法

    有一个util.js文件,内容如下 function Util () { ... } export default new Util() 可以在main.js里面通过import引入js import ...

  7. vue cli 项目中设置背景图

    https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...

  8. vue cli 3

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

  9. vue cli的安装与使用

    一.简介 vue作为前端开发的热门工具,受到前端开发人员的喜爱.为了简化项目的构建,采用vue cli来简化开发. vue cli是一个全局安装的npm包,提供了终端使用的命令.vue create可 ...

  10. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

随机推荐

  1. Win10 - MySQL 10061 错误

    Win10 - MySQL 10061 错误 报错内容为: Can't connect to MySQL server on localhost (10061) 参考 : MySQL问题记录--Can ...

  2. User Agent 大全

    一.基础知识篇: Http Header之User-Agent User Agent中文名为用户代理,是Http协议中的一部分,属于头域的组成部分,User Agent也简称UA.它是一个特殊字符串头 ...

  3. LNMP构建动态网站WordPress

    LNMP构建动态网站wordpress 一.部署LNMP架构 1.安装nginx #配置nginx源 cat>/etc/yum.repos.d/nginx.repo<<-EOF [N ...

  4. 用微软官方的 HTML Help Workshop制作的CHM文件不显示图片解决办法

    制作CHM文档,方便小巧还易于查看,用处自不必多说了,最近想把这个季度所学习的内容全部制作成CHM格式文档,给自己后续用来温故而知新,同时也可以做为后起之秀避坑法宝.但是在生成CHM文档之后发现有些地 ...

  5. .NET CORE学习笔记系列(2)——依赖注入[5]: 创建一个简易版的DI框架[下篇]

    为了让读者朋友们能够对.NET Core DI框架的实现原理具有一个深刻而认识,我们采用与之类似的设计构架了一个名为Cat的DI框架.在上篇中我们介绍了Cat的基本编程模式,接下来我们就来聊聊Cat的 ...

  6. Redis数据过期策略详解

    http://www.cnblogs.com/xuliangxing/p/7151812.html 本文对Redis的过期机制简单的讲解一下 讲解之前我们先抛出一个问题,我们知道很多时候服务器经常会用 ...

  7. Android开发欢迎页点击跳过倒计时进入主页

    没点击跳过自然进入主页,点击跳过之后立即进入主页     1.欢迎页布局activity_sp.xml放一张背景图(图片随你便啦)再放一个盛放倒计时的TextView   <?xml versi ...

  8. (七)Create an Index

    Now let’s create an index named "customer" and then list all the indexes again: 现在让我们创建一个名 ...

  9. Vultr CentOS 7 安装 Docker

    前言 最近在梳理公司的架构,想用 VPS 先做一些测试,然后就开始踩坑了!我用 Vultr 新买了个 VPS. 安装的 CentOS 版本: [root@dbn-seattle ~]# cat /et ...

  10. 《React Native 精解与实战》书籍连载「React Native 源码学习方法及其他资源」

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React Native 源码学习方法及其他资源. 最后的章节给大家介绍 React Native ...