使用@vue-cli3时 在你感觉所以配置都搞好开始创建项目时,不停的报错,就是创建不成功 清npm缓存也不行 改淘宝镜像也不行 就快奔溃了,最后最终(其实我在凑150字,为了能发到首页给更多采坑的兄dei们看到,哈哈哈) 我搜了很多最终用下面这个方法解决了 打开这个文件 这个值开始是true,改成false再重新创建项目就ok了 亲测有效!!!!!!!!…

作为一个本来是java开发的搬运工,在公司前端人员缺乏的时候,就直接顶上来开发前台页面了(话说我已经很久很久没写java代码了(:′⌒`)) 好吧言归正传,刚开始弄前台就是vue,vue2还没弄熟,老板说vue-cli3出来了,你要不用最新的吧,下面就是踩过的坑 -------------------------------------------第一步------------------------------------------- 首先vue-cli3对node版本要求比较高,需要8.9…

此时做的一个vue-cli3项目build后,app.js达到了10M,主要为elementui.quill等组件: 最开始使用“compression-webpack-plugin”插件根据网上的说法 npm run build --report 随后访问 localhost:8888既可以访问,试了好几次都没法访问,后来点开“dist”发现里面多了一个report的html文件,直接在浏览器就可以静态预览 后来优化找过很多都是vuecli2的,无意中发现一篇帖子:[Vue CLI 2&3 下…

2019-4-10 10:56:20 星期三 学习iview时需要搭建一套node环境, 这里记录下来 1. 下载安装nodejs  //自带了npm包管理器 2. 设置npm的全局配置: 全局包默认安装路径, 全局缓存路径 3. npm全局安装 vue-cli 3 // 可以创建默认的项目目录和文件, 比如包目录node_modules, 插件目录plugins, 源代码目录src, 以及package.json等省的手动创建了 4. npm全局安装 vue cli server //他也属于…

在VUE-CLI 3下的第一个Element-ui项目(菜鸟专用) (https://www.cnblogs.com/xzqyun/p/10780659.html) 上面这个链接是vue-cli3.0 下 安装 element-ui的详细过程,如果想要按需引用看下面的 1.引入vue add element How do you want to import Element? -->选择 Import on demand (关键) Choose the locale you want to lo…

1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了)   这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是 让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个 当你选择后会出现上面图上的东西,这里你可以自由选择用哪些配置,按上下键 选择哪一个,按空格键确定,所有的都选择好后,按enter键进行下一步,这里 演示,我随便选了几个 下一步之后问询问你安装哪一种 CSS 预处理语言,你随意选择…

首先我们得有图标 这里我们从网上下载svg文件或者UI给你导出svg文件 我们在src 文件下新建一个放置svg 文件 的文件夹 @/src/icons.将所有 icon 放在这个文件夹下. 创建 icon-component 组件 <template> <svg :class="svgClass" aria-hidden="true" :color="svgColor" > <use :xlink:href=&qu…

vue-cli3.0 gui 安装: npm i core-js -g:用于JavaScript的模块化标准库. npm i -g @vue/cli:vue的脚手架工具 运行: vue ui:运行vue图形用户界面 浏览器访问:http://localhost:8000 传统安装脚手架的方式 npm install -g vue-cli :安装全局vue-cli vue init webpack sell: 创建项目名为sell ... cd sell :进入sell文件夹 npm instal…

vue-cli3.X 默认配置 比2.X体验好很多,比如路由 如图,本地正常,传到服务器,因为二级目录,刷新就404,或 502等,找不到文件 nginx解决: location /{ error_page /index.html; } 用宝塔工具的同学,直接粘贴进去即可,如下图: 再次刷新线上/home,已正常访问了 .…

执行: npm install node-sass --save-dev npm install sass-loader --save-dev 自动安装sass,vue-cli3.0 不需要在 webpack.base.config.js 配置,直接使用.(此处可能有误,自己在执行的时候直接可以在页面用了,没有配置,其他博客有看到说需要配置,此处可能有误,欢迎指正) <style lang="less" scoped> </style>…

如果这个js文夹,放在vue-cli3中搭建的项目中的,public文件夹下,通过 //.js可以省略不行 import '/public/xxx.js' 其实你在浏览器中看的时候,发现会报错误 : 找不到 xxx模块: 这时候你可以考虑吧xxx.js 放到src下的assets文件下 然后你通过 //@代表src文件夹,vue-cli中默认的 import '@/assets/xxx.js' 这时候再看发现就不报错了.…

前面说过用vue-cli3快速开发原型的搭建,下面来说一下搭建一个完整的项目 首先我们可以输入命令(创建一个项目名为test的项目) vue create test 输完这个命令后,会让你选择配置项,默认是eslint和babel,也可以选择其它的选项,如vue-router.vue-x.css预处理语言.单元测试.typeScript等... 选完这些选项之后,就会自动安装依赖什么的将项目搭建起来. 在现有的项目中安装插件 上面我们创建test项目时,加入我们直选了babel和eslint插件…

先来讲一下,什么是快速原型开发. 当我们需要紧急或提前开发单独的一个页面时,有时候不需要在原项目中创建一个页面,再开发,我们可以单独的区开发这个项目,那么怎样单独的区开发这个项目呢,之前使用过vue-cli的都知道,用vuecli创建出来一个项目需要有各种配置啊,入口文件啊,出口文件啊什么的,但是vue-cli3为我们提供了一项快速原型开发模式,我们不需要去配置这些东西(有需要也可以配置),就可以快速的去开发者个单独的页面.下面来说一下步骤: 实现需要准备必备条件: node安装上(8.11+)…

一.背景问题 项目中如果有大量的小图标,如果不使用阿里的iconfont.UI给一个加一个,加一个引用一个,每个图标虽然很小,但是也是一次请求,每次请求都是消耗性能资源的. 二.解决思路 使用webpack-spritesmith可以将所有的icon小图标整合成一张图片.每次都只会请求一次,同时还能自动生成定位样式,对于都是同尺寸的小图标,直接可以使用. 三.废话少说,直接来code 1.我是使用vue-cli3配置这个webapck的插件的.如果使用cli2的网上也很多,自行查找 2.查阅资料…

vue-cli 都到 3.0.3 了,所以是时候玩转一下 vue-cli 3 的新特性. 1. vue-cli 3.0.3 vue cli 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它. npm install -g @vue/cli # OR yarn global add @vue/c…

sockjs-node 是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟.全双工的浏览器和web服务器之间通信通道. 服务端:sockjs-node(https://github.com/sockjs/sockjs-node)客户端:sockjs-clien(https://github.com/sockjs/sockjs-client) 如果你的项目没有用到 sockjs,vuecli3 运行 npm run serve 之后 network 里面一直调…

webpack 打包扩展 css:sass支持.normalize.css._mixin.scss._variables.scss vw.rem布局 跨域设置 eslint设置 cdn引入 路由设计.登录拦截 axios.api 设计 vuex状态管理 项目地址: vue-cli3-H5 demo地址: zhouyupeng.github.io/vuecli3H5/#… webpack 打包扩展 vue-cli3.*后目录结构大改,去除了以往的build,config文件夹,要实现配置的改动在根…

安装脚手架cli3.0 全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli 查看版本/是否安装成功 vue -V 如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具 npm install -g @vue/cli-init vue init webpack my-project 创建项目 在想要的件夹下面创建项目 vue create my-project 如果之前创建过项目,会记录上次创建项目的配置 指向的…

在执行 vue create project 后如果显示如下 npm run serve 则表示你使用的是npm创建的项目. 如果显示如下 yarn serve 则表示此项目为yarn创建. 那如何切换包管理器呢? 在VueCLI3官网有如下一段描述: 注意最后一句,明确的说明了包管理器和淘宝npm镜像源会存入  ~/.vuerc 此文件如果是windows环境,则存在了 C:/user/administrator/ 下: 打开此文件: 只需手动更改配置内容npm为yarn,即可更改创建项目时的…

Vue CLI是一个用于快速Vue.js开发的完整系统 3.X较2.X结构变了很多,更优雅,开发体验更好 官方:https://cli.vuejs.org/guide/ 安装:https://cli.vuejs.org/guide/installation.html # 安装 npm install -g @vue/cli # 查看已安装版本vue --version 或者 vue -V # 卸载 npm uninstall @vue/cli # 新建项目 vue create my-proje…

1.目录结构 模板文件是public里的index.html,运行项目的时候,会引用src/main.js(入口文件) 详细文档在这里:https://cli.vuejs.org/zh/config/#pwa public:放着html模板和静态资源,public/index.html 文件是一个会被 html-webpack-plugin 处理的模板.在构建过程中,资源链接会被自动注入. .browserslistrc 指定浏览器版本.不同的浏览器会有兼容性问题,比如css,我们会给它们加上前…

1,安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --save 简要介绍这两个包的用途: flexible会为页面根据屏幕自动添加<meta name='viewport' >标签,动态控制initial-scale,maximum-scale,minimum-scale等属性的值. 例如在Galaxy S III: 例如在iphone6/7/8: po…

https://segmentfault.com/a/1190000016423943 在vue-cli3中安装element-ui 其中两种方式自己选择 格式化代码 使用yarn lint命令自动格式化代码…

如何在vue-cli3.0中使用postcss-plugin-px2rem 插件 插件的作用是 自动将vue项目中的px转换为rem . 为什么这三个中要推荐  postcss-plugin-px2rem呢? 因为 postcss-plugin-px2rem 这个插件  配置选项上有  exclude 属性,它可以配置 是否对 某个文件夹下的所有css文件不进行从px到rem的转换. 所以我们可以利用这个特性,把项目中的  node_module 文件夹排除掉.这样如果我们项目中是用了,前端UI…

在vue-cli3的项目中,npm run serve时会把process.env.NODE_ENV设置为‘development’:npm run build 时会把process.env.NODE_ENV设置为‘production’:此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境. 打包时线上环境可能分多种,比如测试环境和生产环境等等.在vue-cli2中打包时可以修改 “build” 和 “config”中的文件来区分不同的线上环…

vue 开发过程中,保存一次就会编译一次,如果能够减少编译的时间,哪怕是一丁点,也能节省不少时间.开发过程中个人编写的源文件才会频繁变动,而一些库文件我们一般是不会去改动的.如果能把这些库文件提取出来,就能减少打包体积,加快编译速度.本文主要讲述在 vue-cli3 中利用 DllPlugin 来进行预编译. 1.安装相关插件 yarn add webpack-cli@^ add-asset-html-webpack-plugin@^ clean-webpack-plugin@^ --dev 2…

年三十时 vue2.6 发布,向 3.0 看齐,说明 3.0 不远了.作为开发者也应该为vue3.0 做点准备.首先是把 vue-cli 升级到 3.x ,在这记录下 vue-cli2.x 升级 vue-cli3.x 中遇见(将来)遇见的问题. 1.安装 vue-cli3.x npm install -g @vue/cli # OR yarn global add @vue/cli 如果希望还保留 vue-cli2.x 的语法或使用 2.x 的模板,建议安装 cli-init npm insta…

文档:https://cli.vuejs.org/zh/guide/ 条件: npm 更至最新 node >=8.9 1.全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli 2.查看版本/是否安装成功 vue -V image.png 3.在新文件夹下创建项目 vue create my-project image.png 指向的vuecli3是因为上一次记录过的cli3配置,第一次执行create是没有的 按键盘上下键可以选择默认(d…

一.安装vue-cli3 安装并建新项目 二.进入项目安装cordova npm install -g cordova 下载完之后,输入 cordova -v 查看是否成功安装,出现相应的版本号则成功安装. 三.创建cordova cordova create learn-cordova 然后运行一下代码进行初始化配置 cordova platform add android --save cordova platform add ios --save cordova platform add…

1. node.js安装https://nodejs.org/en/download/ 2.npm的安装 由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装.命令如下,出现版本提示表示安装成功: npm -v5.6.0 3. 安装vue-cli3.0 命令 :npm install -g @vue/cli若出现错误:Unexpected end of JSON input while parsing near··…