Vue CLI

最近公司把云平台产品用vue 前后端分离的框架来写，前面大部分开发都比较顺利，后面打包部署出了bug 现在记录下自己遇到的哪些坑 1，我直接npm run build 打包出来，打开dist目录下面的index.html 空白页，页面上出现 no "NODE ENV"是我打包时没有指定打包到哪个环境 正确打包是 npm run build:prod 2.关于vue-router 中mode:'history'的设置，导致我页面打包后也是路由无法跳转 而且出现的bug是语法错误，unexpected toke < 无奈我去掉了history ,重新打包，就可以了 3.关于Nginx的配置nginx.conf 这里先复习下nginx命令，安装nginx点击这里可以查看 start nginx 启动并服务 tasklist /fi "imagename eqnginx.exe" 查看是否启动 nginx -s reload 改变配置文件时，需重启nginx工作进程 关闭进程 nginx -s stop 关闭服务 nginx -s quit 安全关闭 taskkill /F/IM nginx.exe 关闭所有nginx服务 下面整理下正确打包，部署到nginx的方法 新手小白建议在mode:hash 下先运行 第一步：打包（mode:hash） 1

vue-cli+electron一种新的脚手架(vue-electron) vue-electron主要业务逻辑都放在src下的renderer文件夹内，和之前的vue-cli搭建项目流程没有任何区别 GIT地址： https://github.com/SimulatedGREG/electron-vue 搭建项目： 　　1.全局安装脚手架： npm install -- global vue-cli 　　2.创建项目： //demo06 是项目名称 vue init simulatedgreg/electron-vue demo06 3.cd到项目文件里面，安装依赖： cd demo06 npm install 4.启动这个项目： npm run dev 启动成功之后会自动跳出程序窗口 到此项目结构就搭建好了 关于打包的后面再整理 原文出处：https://www.cnblogs.com/wuhefeng/p/10576034.html 来源： oschina 链接： https://my.oschina.net/u/4411978/blog/3267645

vue-electron官方文档(中文): https://simulatedgreg.gitbooks.io/electron-vue/content/cn vue-electron官方文档(英文): https://simulatedgreg.gitbooks.io/electron-vue/content/en 1.脚手架搭建流程步骤 # 安装 vue- cli 和 脚手架样板代码 npm install -g vue- cli vue init simulatedgreg /electron-vue my- project # 安装依赖并运行你的程序 cd my - project yarn # 或者 npm install yarn run dev # 或者 npm run dev 2.效果图 注意: (1)环境问题: 可以参考我的这篇文章 VsCode源码编译运行 环境与其保持一致，基本上就不会出什么问题。 (2)包管理工具问题: 关于npm和yarn，两者都是包的管理工具 我用npm install总是在报Error之类的错误，用yarn就好了。 来源： oschina 链接： https://my.oschina.net/u/4358626/blog/3585680

ue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。 GitHub地址是： https://github.com/vuejs/vue-cli 一、安装Nodejs 首先需要安装Node环境。安装完成之后，可以在命令行工具中输入 node -v 和 npm -v ,如果能显示出版本号，就说明安装成功。 二、安装vue-cli 安装好node之后，我们就可以直接全局安装vue-cli: npm install -g vue-cli 使用这种方式可能会安装比较慢，推荐大家使用国内的淘宝镜像来安装。(之前安装过了就不过多赘述了) cnpm install -g vue-cli 如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装。后面的安装过程中，如有安装失败的情况，也需要先清理缓存 安装完成后，可以使用vue -V(大写的V)查看vue的版本。 如果接下来你不知道要干嘛，那么你可以在命令行中输入 vue -help 它会有以下提示： 懂点英语的意思应该能看到提示的信息，聪明的你此时接下来执行vue list看看有哪些可用的官网模板： vue list Vue.js官方提供了两种类型的模板项目： 基于vue cli和browserify的项目模板 基于vue cli和webpack的项目模板 vue

一 最近要做一个新官网，需求评审完之后，考虑到官网都是纯静态页面，功能简单，操起vue-cli3几秒内创建好了项目脚手架，开发前，我打开了首页模板文件，看到下面这行字，有了一些思考…… <noscript> <strong>We're sorry but **** doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> ######（ps：四个*是项目名，略去了） 二 JS最初是用来给界面添加交互的，近几年，前端火的原因则主要是因为JS，新技术绝大部分都是基于JS，随着MVVM框架的兴起，前端越来越依赖JS，就像现代工业依赖电力一样，JS甚至一定程度上替代了HTML，使得前端开发者在开发大型项目上更方便快捷了，目前看起来一切都很好，嗯，事实上真的很好吗？ 我想说什么呢，回到本文开始的那行代码，它的作用显而易见，禁用了JS的用户去访问这个网站，就会看到这行提示：当前项目离了JS就跑不起来，请开启JS后继续访问。当网络很慢的情况下，JS还没加载出来（或者干脆用户禁用了JS）那段时间，网站变得一片空白，完全无法访问，这正常吗？显然这是不可接受的，从程序的可访问性、容错性来评分，这个网站的得分肯定是不及格的！ 来看几家比较知名的企业官方网站

ue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。 GitHub地址是： https://github.com/vuejs/vue-cli 一、安装Nodejs 首先需要安装Node环境。安装完成之后，可以在命令行工具中输入 node -v 和 npm -v ,如果能显示出版本号，就说明安装成功。 二、安装vue-cli 安装好node之后，我们就可以直接全局安装vue-cli: npm install -g vue-cli 使用这种方式可能会安装比较慢，推荐大家使用国内的淘宝镜像来安装。(之前安装过了就不过多赘述了) cnpm install -g vue-cli 如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装。后面的安装过程中，如有安装失败的情况，也需要先清理缓存 安装完成后，可以使用vue -V(大写的V)查看vue的版本。 如果接下来你不知道要干嘛，那么你可以在命令行中输入 vue -help 它会有以下提示： 懂点英语的意思应该能看到提示的信息，聪明的你此时接下来执行vue list看看有哪些可用的官网模板： vue list Vue.js官方提供了两种类型的模板项目： 基于vue cli和browserify的项目模板 基于vue cli和webpack的项目模板 vue

项目目录结构  可以明显的看出来，vue-cli2.0与3.0在目录结构方面有明显的不同：  1. vue-cli3移除了配置文件目录：config 和 build 文件夹，增加了vue.config.js文件  2. vue-cli3移除了 static 静态文件夹  3. vue-cli3新增了 public 文件夹  4. vue-cli3将index.html 移动到 public 中 配置项 配置文件目录 vue-cli2：config文件夹 vue-cli3：vue.config.js文件 配置域名 vue-cli2：在config中的dev.env.js和prod.env.js中分别配置 vue-cli3：在vue.config.js中配置 跨域时配置域名 vue-cli2：在config中的index.js中配置 vue-cli3：在vue.config.js中配置 baseUrl 从 vue cli 3.3 起已弃用，请使用publicPath 注意： 具体的vue cli配置可参考该网站： https://cli.vuejs.org/zh/config/#vue-config-js 其他 全局安装vu-cli 3.0 ，如果之前安装了2.0版本，先卸载 npm uninstall -g vue-cli npm install -g @vue/cli 安装完 3

https://blog.csdn.net/violetjack0808/article/details/72620859 https://blog.csdn.net/hsl0530hsl/article/details/78594973 Vue.js学习系列五 —— 从VUE-CLI来聊聊ESLint 原创 2017年05月22日 06:40:41 标签： vue-cli / eslint 7092 最近在用vue-cli写项目的时候，经常和ESLint打交道，也算是不打不相识啦。下面总结一下在学习Vue的时候遇到的一些问题。 ESLint简介 关于ESLint的介绍网上很多，这里就简单说些有用的。 ESLint的作用是检查代码错误和统一代码风格的。由于每个人写代码的习惯都会有所不同，所以统一代码风格在团队协作中尤为重要。 vue-cli的eslint相关 vue-cli在init初始化时会询问是否需要添加ESLint，确认之后在创建的项目中就会出现 .eslintignore 和 .eslintrc.js 两个文件。 .eslintignore 类似Git的 .gitignore 用来忽略一些文件不使用ESLint检查。 .eslintrc.js 是ESLint配置文件，用来设置插件、自定义规则、解析器等配置。 .eslintrc.js // http://eslint.org

安装vue-cli npm install -g @vue/cli # OR yarn global add @vue/cli 安装完成查看版本 查看版本 vue -V 如果报错： vue : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\vue ... 　　1.管理员身份打开 　　 　　2.输入 set-ExecutionPolicy RemoteSigned 　　 4.选择Y 或者A ，就好了 vue-cli4.0对比了一下3.0的脚手架，除了目录发生变化一些，其他的都一样 安装步骤和vue-cli3.0的一模一样 1.创建项目 vue create project-name 　　default 是 使用默认配置 　　 Manually select features 是 自定义配置 2.选择配置（自定义配置） 3.选择css预编译，这里我选择SCSS 4. 语法检测工具，这里我选择ESLint + Prettier 5.选择语法检查方式，这里我选择保存就检测【何时进行ESLint语法校验：Lint on save】 6.接下来会问你把babel,postcss,eslint这些配置文件放哪【 In dedicated config files (单独使用文件进行配置)】 7.是否保存为模板 N 不记录，如果键入 Y 需要输入保存模板名字 8

##前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候，使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开的端口 ##正文 开发环境中的跨域 首先，要确定后台服务的ip与端口 这里我的后台开的是 localhost:8081 npm run serve在 8080 端口 一般我们使用ajax请求的时候，会可以把url ip:port/api 写在ajax请求的url参数中 this.axios.get("localhost:8081"+ `/bpi/api/DayTradeinfoMarketStatusSearch?ddate=${day}`) 这样，这个请求就是从localhost:8080发向localhost:8081,端口不同这就遇到了跨域的问题 vue cli WebpackDevServer 解决跨域的方法是通过node开一个服务器进行代理。 前台发向后台服务器的请求，先发向node所开的服务，node服务器以相同的参数向真正的服务器进行请求，再把响应返回给前台。 禁止跨域是浏览器的安全策略限制 这里有两个误区 ✕ 动态请求就会有跨域的问题 ✔ 跨域只存在于浏览器端，不存在于安卓/ios/Node.js/python/ java等其它环境 2.✕ 跨域就是请求发不出去了