vue-cli

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，GitHub地址是： https://github.com/vuejs/vue-cli 一、 安装 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 查看是否安装成功 然后使用 cnpm 安装 vue-cli 和

Vue-Cli自3.x以上版本取消了Config目录，因此，需要玩家自己手动配置，具体方案如下： 1. 在项目的根目录新建 vue.config.js 文件，并在该文件中配置相应的启动项 // vue.config.js module.exports = { publicPath: '/dist/', //打包运行环境的根路径为/dist devServer: { // 开发调试服务器配置项 open: true, // npm run serve后自动打开页面 host: '0.0.0.0', // 匹配本机IP地址 port: 9009, // 开发服务器运行端口号 compress: true // 启用静态资源压缩算法 } } 2. 配置并保存vue.config.js文件后，在项目根目录运行npm run build命令，会在根目录生成dist文件夹。将该文件夹部署到Apache Httpd Server或Nginx Web Server的Web应用根目录下，在浏览器地址栏输入：http://localhost/dist/ 即可。 关于vue.config.js文件中的更多配置项，可参考Vue-Cli官方文档中的“配置参考”：https://cli.vuejs.org/zh/config/ 来源： oschina 链接： https://my.oschina.net

0. Nginx使用 以windows版为例，下载niginx压缩包并解压到任意目录，双击nginx.exe，在浏览器中访问 http://localhost ，如果出现Welcome to nginx!页面则说明成功。 nginx常用命令如下： nginx -h # 打开帮助 nginx -t # 检查配置文件是否正确 # 以下命令均要先启动nginx才能执行 nginx -s stop # 停止 nginx -s quit # 退出 nginx -s reopen # 重新启动（注意不会重新读取配置文件） nginx -s reload # 重新读取配置文件 1. 部署项目到Nginx根目录 对于vue-cli创建的项目，修改vue.config.js文件（位于项目根目录下，没有的话自行创建）： module.exports = { // 开发环境中使用的端口 devServer: { port: 8001 }, // 取消生成map文件（map文件可以准确的输出是哪一行哪一列有错） productionSourceMap: false, // 开发环境和部署环境的路径 publicPath: process.env.NODE_ENV === 'production' ? '/' : '/my/', configureWebpack: (config) => { // 增加

Vue-Cli自3.x以上版本取消了Config目录，因此，需要玩家自己手动配置，具体方案如下： 1. 在项目的根目录新建 vue.config.js 文件，并在该文件中配置相应的启动项 // vue.config.js module.exports = { publicPath: '/dist/', //打包运行环境的根路径为/dist devServer: { // 开发调试服务器配置项 open: true, // npm run serve后自动打开页面 host: '0.0.0.0', // 匹配本机IP地址 port: 9009, // 开发服务器运行端口号 compress: true // 启用静态资源压缩算法 } } 2. 配置并保存vue.config.js文件后，在项目根目录运行npm run build命令，会在根目录生成dist文件夹。将该文件夹部署到Apache Httpd Server或Nginx Web Server的Web应用根目录下，在浏览器地址栏输入：http://localhost/dist/ 即可。 关于vue.config.js文件中的更多配置项，可参考Vue-Cli官方文档中的“配置参考”：https://cli.vuejs.org/zh/config/ 来源： https://my.oschina.net/yvanwang/blog

前言 在上一篇博客 vue学习笔记(八)组件校验&通信 中，我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信)，上一篇博客也提到那是对组件内容的刚刚开始，而本章博客将会重点的讲解vue-cli中的组件通信，毕竟这在以后的开发内容中是非常普遍使用的。那么一起来看看本篇博客需要学习的知识点吧！ 本章目标 学会使用vue-cli中父组件向子组件传递信息 学会使用vue-cli中子组件向父组件传递信息 学会使用vue-cli中非父子组件传递信息 vue-cli中的父组件向子组件传递信息 既然提到要使用vue-cli实现组件通信，那么肯定要有vue-cli的环境，没有搭建vue-cli环境的园友可以参考这篇博客 使用webstorm搭建vue-cli项目 ，这篇博客讲解的非常透彻，大家可以先将环境搭建好，然后再来看这篇博客，假设我们项目搭建好了，项目目录结构如下 (1)创建两个组件父组件和子组件 我们需要在src/components/parent/创建两个组件ParentComponent.vue和ChildComponent.vue,创建好之后目录如下 (2)分别在对应的组件中编写代码 ParentComponent.vue <template> <div> <h1>{{title}}</h1> <!--注意：每个组件注册必须有一个根元素-->

环境： windows: 10 vue-cli: 4 编辑器： vsCode npm: 6.11.3 ＃去nodejs网安装https://npm.taobao.org/mirrors/node/v12.12.0/node-v12.12.0-x64.msi １．安装 ： >npm install -g @vue/cli # 查看版本 PS D:\vue\project-3> vue -V @vue/cli 4.0.4 ２．创建项目： 添加淘宝镜像： npm install -g cnpm --registry=https://registry.npm.taobao.org 创建项目 vue create project-3 #这里可以上下选择， 我们选 手动 Vue CLI v4.0.4 ? Please pick a preset: default (babel, eslint) > Manually select features # 然后根据自己的需求选组件 Vue CLI v4.0.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: (*) Babel ( ) TypeScript ( ) Progressive Web App

vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 1、安装node，vue运行需要基于npm一定的版本，所以首先升级npm到最新的版本，而在安装的过程中个人比较喜欢淘宝的镜像，所以先安装cnpm（因为速度和稳定性都比较好） 2、在目标文件夹下打开终端 3、执行cnpm install vue-cli -g 全局安装 运行vue查看安装是否成功 4、运行vue init webpack(注：模板名称) sell2(注：项目名称) 5、进入项目文件夹下执行 cnpm install 来安装下载到模板中的package.json中的依赖，安装完成后会在项目文件夹下自动生成node-module文件来存放安装的依赖文件 6、由于依赖项非常的多编辑器在检索module文件时会非常的耗内存，所以在用webstorm编辑器启动项目的时候我们往往会在node-module文件夹右键去阻止检索该文件 注：webstorm一打开就卡死了，没办法操作文件夹这种情况的解决方法为，首先在文件夹形式下打开删除node-modules文件夹，然后进行阻止检索的方法，然后在重新cnpm install就好*（这种方法需要安装完依赖项先运行一次然后删除node_modules子文件，webstorm打开项目，禁止检索node_ module文件夹，然后在删除该文件夹，重新安装即可

运用 vue-cli 和 webpack 搭建 vue 开发环境： 在这里我们首先下载node.js。 因为我们要用到npm（cnpm）包下载，是基于node.js的（node.js下载地址官网地址(https://nodejs.org/en/)） cnpm下载包的速度更快一些：“” cnpm(需要安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org) git用的是linux命令 不要问为什么，能用就行，你说是不是？ windows系统，下载完git以后我们再桌面右击鼠标会看到git Bash，点开它，然后就打开了git， git有很多功能，同时git可以往github上push你的文件，github是一个很不错的仓库管理工具哦 好，我们直接开始，打开git之后会显示 然后我们执行npm install webpack 就会自动下载webpack最新版本了 在这里我们直接进入正题，怎么使用vue-cli搭建vue的开发环境 在这里我们需要全局安装vue-cli 在git里执行npm install --global vue-cli 安装vue命令环境 ------------以上命令执行一次就可以喽 执行vue --verson查看是否安装成功， 显示vue的版本，就是安装成功了

1、创建vue项目 cmd命令执行 　　　　 vue create app (app 自定义的项目名) 一般都会选择后者，自己配置一下自己需要的选项（空格为选中） 这是我个人需要的一些选项，路由Router、状态管理Vuex、CSS处理器等（可以根据自己需要进行选择） 这里选择yes（Y） 我这里选用sass 打开ESLint和常规的一些 静静等待安装完成就可以了！ 2、运行项目并配置多页面 cd app yarn serve /npm run serve 　 一般生成的都是8080端口的，由于本地已经在跑一个8080端口的服务，所以默认打开了8081端口 1、在根目录下创建一个vue.config.js设置入口配置 module.exports = { pages: { about: { entry: 'src/pages/about/main.js', template: 'public/about.html', filename: 'about.html' }, index: { entry: 'src/pages/home/main.js', template: 'public/index.html', filename: 'index.html' } } } 　　2、创建文件和移除原文件 　　移除根目录下的main.js和App.vue 　

前言 在上一篇博客 vue学习笔记(八)组件校验&通信 中，我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信)，上一篇博客也提到那是对组件内容的刚刚开始，而本章博客将会重点的讲解vue-cli中的组件通信，毕竟这在以后的开发内容中是非常普遍使用的。那么一起来看看本篇博客需要学习的知识点吧！ 本章目标 学会使用vue-cli中父组件向子组件传递信息 学会使用vue-cli中子组件向父组件传递信息 学会使用vue-cli中非父子组件传递信息 vue-cli中的父组件向子组件传递信息 既然提到要使用vue-cli实现组件通信，那么肯定要有vue-cli的环境，没有搭建vue-cli环境的园友可以参考这篇博客 使用webstorm搭建vue-cli项目 ，这篇博客讲解的非常透彻，大家可以现将环境搭建好，然后再来看这篇博客，假设我们项目搭建好了，项目目录结构如下 (1)创建两个组件父组件和子组件 我们需要在src/components/parent/创建两个组件ParentComponent.vue和ChildComponent.vue,创建好之后目录如下 (2)分别在对应的组件中编写代码 ParentComponent.vue <template> <div> <h1>{{title}}</h1> <!--注意：每个组件注册必须有一个根元素-->