vue-cli

1. 什么是vue-cli? vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下： vue init webpack xxx 注1：xxx 为自己创建项目的名称 注2：必须先安装vue,vue-cli，webpack，node等一些必要的环境 2. 安装vue-cli npm install -g vue-cli npm install -g webpack 注1：安装成功后，会出现如下文件 D:\initPath node-v10.15.3-win-x64 node_global vue vue.cmd vue-init vue-init.cmd vue-list vue-list.cmd 3. 使用脚手架vue-cli(2.X版)来构建项目 ## 步骤一：使用脚手架创建项目骨架 ## 此步骤可理解成：使用eclipse创建一个maven的web项目 cmd #打开命令窗口 d: #切换到d盘 cd d:\temp #进入d:\temp目录 vue init webpack spa1 #此命令用于创建SPA项目，它会在当前目录生成一个以“spa1”命名的文件夹 #spa1即为项目名，项目名不能用中文或大写字母，然后终端会出现“一问一答”模式(见注2) 注1：cmd命令行窗口显示中文乱码，多是因为cmd命令行窗口字符编码不匹配导致

使用vue-cli搭建SPA项目 前提：搭建好NodeJS环境 什么是vue-cli? vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下： vue init webpack xxx 安装vue-cli npm install -g vue-cli npm install -g webpack 安装成功后，会出现如下文件 node-v10.15.3-win-x64 node_global vue vue.cmd vue-init vue-init.cmd vue-list vue-list.cmd 安装完成之后打开命令窗口并输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。 使用脚手架vue-cli(2.X版)来构建项目 cmd 打开命令窗口 d 切换到vue-cli所安装的盘（d） cd d:\temp 进入d:\temp目录 vue init webpack spa1 此命令用于创建SPA项目，它会在当前目录生成一个以“spa1”命名的文件夹 spa1即为项目名，项目名不能用中文或大写字母，然后终端会出现“一问一答”模式 “一问一答”模式 1 .Project name： 项目名，默认是输入时的那个名称spa1，直接回车 2 .Project description： 项目描述，直接回车 3.

vue-cli是什么？ vue-cli 是vue.js的脚手架，用于自动生成vue.js模板工程的。 vue-cli怎么使用？ 安装vue-cli之前，需要先装好vue 和 webpack npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install -g vue-cli //全局安装vue-cli 注意：上面这些装过一次之后都不需要再安装了 比如说我的项目要生成在D：/project下面 那么先进到目录里 d: cd project 使用vue-cli构建vue项目 vue init webpack projectName //生成项目名为projectName的模板 cd projectName npm install //初始化安装依赖 这样子项目就安装完了,生成文件如下 。然后执行 npm run dev 在浏览器打开http://localhost:8080，则可以看到欢迎页了。看到这个就说明一切顺利 vue-cli生成环境 但是这个只能在本地跑，要如何在我们自己的服务器上访问呢？此时需要执行 npm run build 会生成静态文件，在根目录的dist里，里面有个index.html，这是服务器访问的路径指定到这里就可以访问我们自己的项目了。 但是呢！！ 把index

Node.js npm 什么是Node.js 以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript，基于Chrome V8 引擎的。 npm 是Node.js 的包管理工具。 npm的安装和更新 Node.js下载安装 Node.js 官网下载安装。npm自带的包管理工具。 查看安装版本信息： 　　-- node -v 查看Node.js 版本信息 　　-- npm -v 查看npm版本信息 更新npm到指定版本： 　　-- npm install npm@5.3.0 -g 　　-- npm install npm@latest -g 更新最新的稳定版本 npm 常用操作 之前我们用JQuery或者Bootstrap用cdn 或者直接手动下载并放入项目，而且要管理版本。 有了npm，我们管理自己的依赖包以及版本更加简单。 到自己项目目录下，进行以下命令： 　　-- npm init -y 输入-y使用默认配置项 生成package.json文件。 　　-- npm i jquery@0.0.0 简写install 为 i 下载依赖 不写@ 默认最新版本 　　-- npm uninstall jquery 卸载依赖包 　　-- npm update jquery 更新依赖包 　　-- npm list 列出已安装的依赖 　　-- npm install

1.安装node 因为vue项目是依赖于node.js、npm的，所以需要先安装node，node安装好了，npm也就安装好了。 安装node：直接去node官网找适合自己电脑版本的安装包下载即可。 测试是否有node或者是否安装好，命令窗口输入以下命令测试即可。 node -v npm -v vue -V 出现版本号即安装好了。 2.安装vue-cli 全局安装，命令行输入：npm install -g vue-cli 如果觉得npm慢的话，可以选择淘宝镜像 npm install -g vue-cli --registry=https://registry.npm.taobao.org vue-cli首次安装需要，安装好后续项目就不需要再安装了。 3.搭建项目框架 进入某一目录，输入cmd进入命令窗口， vue init webpack my-vue my-vue 是项目名称，可随意命名 回车即可 选择自己所需方式，回车即开始安装。 安装完成后，按命令提示输入 一个项目便开启了！ 来源： CSDN 作者： weixin_46016883 链接： https://blog.csdn.net/weixin_46016883/article/details/103685416

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 1. 安装 syntax-dynamic-import 插件 如果在 vue-cli 使用了 babel ，需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。 $ npm install --save-dev @babel/plugin-syntax-dynamic-import 安装完成后，配置文件 babel.config.js module.exports = { "presets": [ "@vue/app" ], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" }, "syntax-dynamic-import" ] ] } 2. 修改路由配置 在 router.js 中的组件引用，作如下改动: // import Login from '@/views/users/Login' // import Register from '@/views/users/Register' // import Home

安装包名称改为@vue/cli npm install - g @vue / cli //安装 npm view @vue / cli version //npm查看最新版本 新建项目后，package.json 下的 script "scripts" : { "serve" : "vue-cli-service serve" , "build:stage" : "vue-cli-service build --mode staging" , //--mode环境模式，最终将会被process.env（environment的缩写）属性值拿到 "build" : "vue-cli-service build" , "lint" : "vue-cli-service lint" , "test:unit" : "vue-cli-service test:unit" , "test:e2e" : "vue-cli-service test:e2e" , } vue-cli-service serve (命令) options 参数如下 Usage : vue - cli - service serve [ options ] Options : -- open open browser on server start -- copy copy url to clipboard on

vue-cli 是vue.js的脚手架，用于自动生成vue.js模板工程的。 1、使用npm安装vue-cli 需要先装好vue 和 webpack（前提是已经安装了nodejs，否则连npm都用不了） 　　npm install -g vue //全局安装vue 　　npm install -g webpack //全局安装webpack 　　npm install -g vue-cli //全局安装vue-cli 　 　　注意：上面这些装过一次之后都不需要再安装了 2、使用vue-cli构建vue项目 vue init webpack my-project //生成项目名为my-project的模板 命令输入后，会进入安装阶段，需要用户输入一些信息: Project name (vuetest) 项目名称，可以自己指定，也可直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters），阮一峰老师博客 为什么文件名要小写 ，可以参考一下。 Project description (A Vue.js project) 项目描述，也可直接点击回车，使用默认名字 Author (........) 作者（随便你） Runtime + Compiler: recommended

更新时间：2018-07-29 1.data functions should return an object // 这个问题是 Vue 实例内,单组件的data必须返回一个对象;如下 <script> export default { data () { return {} } } </script> // 为什么要 return 一个数据对象呢? 官方解释如下: data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！ 2.我给组件内的原生控件添加事件,怎么不生效了 <!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件--> <!--例1--> <el-input placeholder="请输入关键词" @mouseover="testKeyword"></el-input> <!--例2--> <router-link to="/aaa" @click="navTab">导航</router-link> <!--上面的两个例子都没法触发事件!!!--> <!--究其原因,少了一个修饰符 .native--> <!--官方文档：你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使 用 v-on 的 .native 修饰符：-->

由于公司的前端开始转向 VueJS，最近开始使用这个框架进行开发，遇到一些问题记录下来，以备后用。 主要写一些 官方手册 上没有写，但是实际开发中会遇到的问题，需要一定知识基础。 涉及技术栈 CLI: Vue-CLI UI: Element HTML: Pug(Jade) CSS: Less JavaScript: ES6 polyfill 与 transform-runtime 首先，vue-cli 为我们自动添加了 babel-plugin-transform-runtime 这个插件，该插件多数情况下都运作正常，可以转换大部分 ES6 语法。 但是，存在如下两个问题： 1、异步加载组件时，会产生 polyfill 代码冗余 2、不支持对全局函数与实例方法的 polyfill 两个问题的原因均归因于 babel-plugin-transform-runtime 采用了沙箱机制来编译我们的代码（即：不修改宿主环境的内置对象）。 　　由于异步组件最终会被编译为一个单独的文件，所以即使多个组件中使用了同一个新特性（例如：Object.keys()），那么在每个编译后的文件中都会有一份该新特性的 polyfill 拷贝。如果项目较小可以考虑不使用异步加载，但是首屏的压力会比较大。 　　不支持全局函数（如：Promise、Set、Map），Set 跟 Map