vue-cli项目生成
安装vue-cli
- C:\Users\fei>npm install -g vue-cli
- npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coff
- eescript" (no hyphen)
- D:\nodes\node_cache\vue-init -> D:\nodes\node_cache\node_modules\vue-cli\bin\vue
- -init
- D:\nodes\node_cache\vue -> D:\nodes\node_cache\node_modules\vue-cli\bin\vue
- D:\nodes\node_cache\vue-list -> D:\nodes\node_cache\node_modules\vue-cli\bin\vue
- -list
- + vue-cli@2.9.6
- added 239 packages in 79.481s
相关命令
查看版本信息和帮助信息
- C:\Users\fei>vue -V
- 2.9.6
- C:\Users\fei>vue --help
- Usage: vue <command> [options]
- Options:
- -V, --version output the version number
- -h, --help output usage information
- Commands:
- init generate a new project from a template
- list list available official templates
- build prototype a new project
- create (for v3 warning only)
- help [cmd] display help for [cmd]
查看模板信息
- C:\Users\fei>vue list
- Available official templates:
- ★ browserify - A full-featured Browserify + vueify setup with hot-reload, li
- nting & unit testing.
- ★ browserify-simple - A simple Browserify + vueify setup for quick prototypi
- ng.
- ★ pwa - PWA template for vue-cli based on the webpack template
- ★ simple - The simplest possible Vue setup in a single HTML file
- ★ webpack - A full-featured Webpack + vue-loader setup with hot reload, lint
- ing, testing & css extraction.
- ★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping
- .
- # 切换到指定目录
- C:\Users\fei>cd E:\前端\vue\vue学习\第一个vue-cli项目
- C:\Users\fei>e:
- E:\前端\vue\vue学习\第一个vue-cli项目>
项目生成
- E:\前端\vue\vue学习\第一个vue-cli项目>vue init webpack-simple myProject
- ? Project name 01
- ? Project description A Vue.js project
- ? Author 张亚飞 <1271570224@qq.com>
- ? License MIT
- ? Use sass? No
- vue-cli · Generated "myProject".
- To get started:
- cd myProject
- npm install
- npm run dev
如果报错
- > cross-env NODE_ENV=development webpack-dev-server --open --hot
- 'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序
- 或批处理文件。
- events.js:167
- throw er; // Unhandled 'error' event
- ^
解决方案
- npm install webpack-cli@3.0.0 -g
vue开源项目汇总
- https://github.com/opendigg/awesome-github-vue
vue-cli项目生成的更多相关文章
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- vue cli 项目的提交
前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 ...
- vue.cli项目中src目录每个文件夹和文件的用法
assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
- Vue cli项目开启Gzip
目录 安装 compression-webpack-plugin 更改配置文件 服务器开启gzip功能 安装 compression-webpack-plugin 建议安装v1.1.11版本,最新版本 ...
- vue/cli项目添加外部js文件的一个方法
有一个util.js文件,内容如下 function Util () { ... } export default new Util() 可以在main.js里面通过import引入js import ...
- vue cli 项目中设置背景图
https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- vue cli的安装与使用
一.简介 vue作为前端开发的热门工具,受到前端开发人员的喜爱.为了简化项目的构建,采用vue cli来简化开发. vue cli是一个全局安装的npm包,提供了终端使用的命令.vue create可 ...
- [转]Vue CLI 3搭建vue+vuex 最全分析
原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...
随机推荐
- Win10 - MySQL 10061 错误
Win10 - MySQL 10061 错误 报错内容为: Can't connect to MySQL server on localhost (10061) 参考 : MySQL问题记录--Can ...
- User Agent 大全
一.基础知识篇: Http Header之User-Agent User Agent中文名为用户代理,是Http协议中的一部分,属于头域的组成部分,User Agent也简称UA.它是一个特殊字符串头 ...
- LNMP构建动态网站WordPress
LNMP构建动态网站wordpress 一.部署LNMP架构 1.安装nginx #配置nginx源 cat>/etc/yum.repos.d/nginx.repo<<-EOF [N ...
- 用微软官方的 HTML Help Workshop制作的CHM文件不显示图片解决办法
制作CHM文档,方便小巧还易于查看,用处自不必多说了,最近想把这个季度所学习的内容全部制作成CHM格式文档,给自己后续用来温故而知新,同时也可以做为后起之秀避坑法宝.但是在生成CHM文档之后发现有些地 ...
- .NET CORE学习笔记系列(2)——依赖注入[5]: 创建一个简易版的DI框架[下篇]
为了让读者朋友们能够对.NET Core DI框架的实现原理具有一个深刻而认识,我们采用与之类似的设计构架了一个名为Cat的DI框架.在上篇中我们介绍了Cat的基本编程模式,接下来我们就来聊聊Cat的 ...
- Redis数据过期策略详解
http://www.cnblogs.com/xuliangxing/p/7151812.html 本文对Redis的过期机制简单的讲解一下 讲解之前我们先抛出一个问题,我们知道很多时候服务器经常会用 ...
- Android开发欢迎页点击跳过倒计时进入主页
没点击跳过自然进入主页,点击跳过之后立即进入主页 1.欢迎页布局activity_sp.xml放一张背景图(图片随你便啦)再放一个盛放倒计时的TextView <?xml versi ...
- (七)Create an Index
Now let’s create an index named "customer" and then list all the indexes again: 现在让我们创建一个名 ...
- Vultr CentOS 7 安装 Docker
前言 最近在梳理公司的架构,想用 VPS 先做一些测试,然后就开始踩坑了!我用 Vultr 新买了个 VPS. 安装的 CentOS 版本: [root@dbn-seattle ~]# cat /et ...
- 《React Native 精解与实战》书籍连载「React Native 源码学习方法及其他资源」
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React Native 源码学习方法及其他资源. 最后的章节给大家介绍 React Native ...