vue-cli

VUE 一. vue-cli构建项目与打包部署 使用vue-cli能够快速的帮助我们构建项目，它就如同一个脚手架，提供了可选的模板。在使用vue-cli之前需要先安装nodejs。 1.1 使用npm构建项目 npm install -g @vue/cli #安装vue-cli,该步骤需要等一段时间 vue -V #查看vue-cli的版本 vue create my-app #创建名为my-app的项目 1.2 项目的结构介绍 public: 存放静态文件。 src: 源码文件，开发就在此目录下。 .gitignore: git的配置文件。 babel.config.js: babel的配置文件，在创建项目的时候才用的脚手架为bable。 package-lock.json：定义了依赖库的下载位置，保证了在项目迁移部署环境的一致性。 package.json: 定义了该项目依赖的类库。 1.3 项目的打包部署 执行命令： npm run build 将生成的dist目录下的文件放入到tomcat或者nginx下，启动服务器，即可访问。 二. 组件化开发 组件化开发是在ES6中提出的，可以提高页面的复用率，提高开发效率，便于团队协作，是一套模板化的代码，要有<template>、<script>、<style>三个标签，分别用来定义布局、脚本和样式。而且<template

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，GitHub地址是： https://github.com/vuejs/vue-cli ，此文转自博主 WiseWrong 。 一、 安装 node.js 首先需要安装node环境，可以直接到中文官网 http://nodejs.cn/ 下载安装包。 只是这样安装的 node 是固定版本的，如果需要多版本的 node，可以使用 nvm 安装 http://blog.csdn.net/s8460049/article/details/52396399 安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。 二、安装 vue-cli 安装好了 node，我们可以直接全局安装 vue-cli： npm install -g vue-cli 但是这种安装方式比较慢，推荐使用国内镜像来安装 ，所以我们先设置 cnpm： npm install -g cnpm --registry=https://registry.npm.taobao.org 如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装。后面的安装过程中，如有安装失败的情况，也需要先清理缓存 同样可以使用 cnpm -v 查看是否安装成功 然后使用

Vue-cli:vue脚手架用于为单页面应用快速搭建,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板 vue2.x ::安装 npm install -g vue-cli ::卸载 npm uninstall -g @vue/cli ::创建项目 webpack模板名称 vue init webpack 安装说明 目录结构 来源： CSDN 作者： God_q1 链接： https://blog.csdn.net/qq_42228694/article/details/103614715

最近在用vue-cli做一个个人网站，准备开发一个音乐播放器，使用的aplayer。在使用aplayer实例的时候发现无法获取。百度了半天，都说只要使用this.$refs.aplayer就能获取到实例，其实不然，我们需要在使用组件的时候先将组件注册到$refs。 ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例 注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册 <template> <div class="zbox-player" @mouseenter="maxPlayer"> <aplayer :class="{ 'aplayer-narrow': ismini }" :autoplay="player.autoPlay" :fixed="isFixde" :mini="ismini" ref="aplayer" :lrcType="player.lrcType" :audio="player.nowSong" ></aplayer> </div> </template> ... this.$refs.aplayer.play(); 如果上面aplayer组件不添加ref="aplayer"属性的话

在vue刚刚开始流行的时候，大多数人学习大概都见到过这样的一个项目吧，可以作为学习此框架的一个模板了 图片.png github源码地址： https://github.com/RegToss/Vue-SPA 课程教程： http://coding.imooc.com/class/74.html 首先搭建好vue的运行环境 1：安装node 端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载 https://nodejs.org/en/ ，安装完成之后，打开cmd开始输入命令。（我用的是win10系统，所以需要管理员权限，右键点击以管理员身份运行cmd），不然会出现很多报错。 image 2：查看node的版本号 下载好node之后，以管理员身份打开cmd管理工具，，输入 node -v ，回车，查看node版本号，出现版本号则说明安装成功。 输入命令： node -v image 3：安装淘宝npm镜像 由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue. 淘宝的cnpm命令管理工具可以代替默认的npm管理工具。 输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org image 4

还原问题现场： 第一次使用vue init webpack projectName的时候，由于操作失误，执行了两次npm install -g vue-cli，然后再使用vue init webpack vuedemo创建vuedemo模板，就出现了 vue-cli · Failed to download repo vuejs-templates/vuedemo: Response code 404 (Not Found)； 解决办法： 执行下面三个命令来检查环境： node -v(小写v) ；如果没有显示node版本，先去官网下载安装node vue -V(大写V) ；如果没有显示vue版本，npm i vue-cli -g安装 webpack -v(小写v)； 如果需要重新安装，就用 npm install webpack -g 当三个条件都满足， 使用 vue init webpack vuedemo( vuedemo 是我自己随便取的名字 )； 经验总结： webpack没有全局安装时，每次新建项目都需要重新安装webpack，否则报如上错误 来源： https://www.cnblogs.com/lifangchao/p/9139581.html