vue-cli

1.执行：npm run build 后生成的dist打包文件直接放在服务器上显示空白？ 解答 ：这是因为在在config文件下的index.js中配置的输出文件目录有问题 assetsPublicPath：‘/’默认是这样，我们要改成‘./’当前目录下 然后在执行 打包 ：npm run build 把生成的文件直接放服务器上就ok了！ 在服务器上有些图片显示不出来？报错找不到 这是因为在模块加载器的url加载器limt限制大小的关系 改成：limit：90000 就可以了 然后重新打包 在服务器上直接刷新网页，然后就找不到网页了。。。？ 这是因为路由模式我们选择了 html5的 mode模式，去掉mode模式重新打包就可以了 解决在测试环境和正式服务器上数据接口频繁切换的模式？ 有时候项目在开发的时候我们的数据请求可能来自测试机，之后正式上线数据来自正式机，我们自己写一个数据调用接口即可如下 api.js let dev= true // 开发环境设置为 true ，准备打包时候设置成 false const test= 'http://localhost/api/' // 测试机上http请求地址 const rel= 'www.xiaohua.com/api/' // 正式机上数据请求地址 const httpUrl=dev? test :rel // 三元判断

vue-cli 3.0 环境安装 全新版本的脚手架、逼格非常高、 记住这个名字 @vue/cli ，对就是这个 你npm 或者yarn 安装就行了，先保证全局环境有它。 npm install -g @vue/cli yarn global add @vue/cli出现这个表示安装成功： 创建项目 这里对比下以前 2.X 之前的版本 ，新版本把 插件 以及 模板 等 移植到命令行界面了. 旧版 创建命令 2.x vue init <template-name> <project-name> 3.x vue create <project-name> 来一张图把 ，这里已经有几个默认配好的模板了，我们选最后的 Manually select features vue-cli3.0 在你创建后会有一个保存当前配置的功能 配置项目插件和功能 这里就很傻瓜了， 你要集成什么 就选就行了。我这里选个我比较常用的。 TypeScript PWA Vue-router Vuex CSS预处理 eslint prettier 自动化测试单元测试 、e2e 启动项目 进入目录,启动项目 这里 vue-cli 3.x 默认会打开浏览器 地址也会打在控制台。 yarn serve // OR npm run serve 项目分析 首先看下整体目录 比 2.x 之前 是精简了不少 去掉了 2.x

vue-cli创建第一个项目（用git bash解决上下键移动选择问题）： https://www.cnblogs.com/dangdanghepingping/p/10257719.html 我电脑是windows；（nodejs已经有了） 1 下载vue-cli cmd 打开命令行，或者是gitbash。最好是用cnpm比较快。 2 创建项目： dos命令，cd 你的希望创建的文件夹位置（cd ：d ） hello-world是项目的名字 3 ：选择预设 选择手动（默认的以后有什么需要，需要手动下？？？？？？？？？？？？？） 如果不想选，则光标移到该选项，按空格键， 目前我只用了babel。 选择配置文件放置位置：我选的是package.json 是否保存预设 然后会提示给选项起名字，回车后，就开始安装依赖包了。 我的安装包出错，很不幸，因为win10 的权限问题。所以我改用了另一个git bash。 其实我觉得git bash很好用，比设计的脑残软件好用多了。 一切从头开始：按照vue官方的文档，用命令winpty vue.cmd create 文件名。 一路走下来，等接上步，把安装包都下载完毕。 接下来，cd 项目文件里。（pwd可以查看当前位置） 运行 code . 可以用编辑器打开文件。 运行 npm run serve 可以 看到文件运行在开发环境中的网址。

vue-list 可以查看vue所有的组件； 选用模板常用的是webpack与webpack-simple。webpack-simple是基于Webpack@2.1.0-beta.25进行配置的版本，而webpack模板则是基于Webpack ^1.3.2配置的。 其中，最大的区别是webpack-simple没有vue-router的中间件，不需要路由时推荐使用； 同时webpack-simple没有格式的检测。（个人认为不太重要）， 使用webpack模板时格式检测也是可以不选的。 安装webpack-simple 第一步 npm install -g vue-cli g(全局环境) 安装vue-cli； 安装完成后； vue init webpack-simple 项目的名称 接下来，会出现Project name输入请求，也就是给项目取名，不用管，采用默认即可，按回车键 然后是项目描述，可写可不写，继续按回车 之后是作者，继续按回车 Use sass 一种css语法规则，同样没太大关系，输入y，按回车 出现代码提示，没有报错，说明webpack-simple已经安装完毕，接下来按照出现的代码提示进行操作 首先，找到自己的项目文件夹（myapp是我取得文件夹名，需要改为你之前取得的项目文件夹名），输入： cd myapp 然后激活npm npm install 最后运行此框架

一、全局安装webpack npm install webpack -g 二、安装node 三、全局安装vue-cli npm install vue-cli -g 四、生成项目 vue init webpack project_name 五、安装依赖模块 在项目文件夹内打开cmd npm install 六、开发环境运行 npm run dev 七、配置篇 1、开发环境编译后自动打开浏览器 修改confog/index.js里面的autoOpenBrowser为true。 2、打包后空白问题修复 修改confog/index.js里面的build对象中的assetsPublicPath为./。 3、打包后图片路径问题 在build/utils.js里面的fallback后面添加publicPath: '../../'。 来源： CSDN 作者： hlqiong96119 链接： https://blog.csdn.net/weixin_42254058/article/details/81701853

这几周一直辗转在vue官网和各大博客搜索关于vue项目实战的例子。学的实在是零零碎碎的。不过总算在对于vue项目搭建有个基本认知，于是直接拿起以前做过的项目进行改版了，接下来是从怎么搭建vue2.x+vue-router项目实战写的一些列文章。我的开发环境都是基于win8电脑系统构建的 针对开篇前，笔者有话说，首先要直接使用官方提供的webpack项目实例需要掌握的几个知识点： 1、vue基础教程：指令属性，条件与渲染，事件监听，class和style动态绑定，组件【重中之重】... 2、vue-route路由机制：了解怎么配置一个基础企业站点足够了 3、es6语法：.vue组件都是通过es6语法来创建 4、webpack...好吧，老实说，这个我只是基础的过了一遍，要想深入了解vue-cli打包机制，这个是很有必要去学习的 首先，我们需要安装nodejs工具，我是直接从官网下载msi文件安装，还未安装的， 点这里走你：http://nodejs.cn/download/ 然后，打开官网教程安装目录，拉动滚动条到达“命令行工具-CLI”目录： https://cn.vuejs.org/v2/guide/installation.html#命令行工具-CLI ，根据官网提供的步骤做起。这里我使用的是Git Bash工具，当然你也可以使用系统自带的cmd工具。 1、npm

npm安装vue by 铁乐猫 npm安装vue Vue.js 是什么 直接用script引入 安装vue 对不同构建版本的解释 安装命令行工具 (CLI) 安装cnpm 安装vue-cli 新建vue项目 运行服务 目录结构 Vue.js 是什么 Vue (读音 /vjuː/，类似于 view ) 是一套用于构建用户界面的 渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 数据驱动视图 数据驱动是vuejs最大的特点。 在vuejs中，所谓的数据驱动就是 当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom 。 声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。 直接用script引入 直接下载并用 <script> 标签引入， Vue 会被注册为一个全局变量。 注：在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告! 开发版本 包含完整的警告和调试模式 生产版本 删除了警告，30.90KB min+gzip 安装vue 在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM