vue-cli3
条件：npm 更至最新node >=8.91.全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli2.查看版本/是否安装成功 vue -V image.png3.在新文件夹下创建项目 vue create my-project image.png指向的vuecli3是因为上一次记录过的cli3配置，第一次执行create是没有的按键盘上下键可以选择默认（default...
2024-01-10
vue-cli脚手架
安装全局环境安装，不必要在项目地址下安装：npm install -g vue-cli卸载全局卸载：npm uninstall -g vue-cli查看是否安装成功：vue list查看vue版本，vue -V 回车，查看vue最新的版本。 使用进入到编辑器主目录下==>vue init webpack 项目名，最终结果是创建一个项目vuecli：接着在命令行安装依赖模块：cd vuecli ==>...
2024-01-10
vue-cli踩坑记录
一、奇怪的bug出现有用户反馈在ie11下打不开我们的线上网站，即使开了兼容模式也打不开我们的网站，页面白屏。初步判断，由于css样式资源、页面资源都已经加载到位，排除网络环境问题后，让用户打开控制台截图看一下，白屏的原因是由于JS执行报错阻塞了后续的逻辑执行和渲染。代码...
2024-01-10
vue-cli需要的包
npm install webpack webpack-dev-server --save-devnpm install vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api --save-devnpm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 --save-devnpm inst...
2024-01-10
vue-cli4脚手架搭建二
vue-cli4脚手架搭建一vue create vue3cd vue3yarn servehttp://localhost:8080/#/main.js文件import Vue from 'vue'import App from './App.vue'import router from './router'Vue.config.productionTip = falsenew Vue({ router, render: h => h(App)}).$mount('#app')render: h =...
2024-01-10
vue-cli脚手架笔记
vue不支持IE8，因为vue使用了IE8无法模拟的 ECMAScript 5特性使用vue-cli脚手架会让我们的工作非常方便比如想编译一下es6的语法就使用 babel loader 和 babel core（可以转换es6代码）webpack中安装babel loader babel corenpm install --save-dev babel-loader babel-core下面利用npm安装vue-cli安装vue-cli只需要安装一次即可1、安装npm...
2024-01-10
vue-cli热更新问题
平时在开发中对 接多个后台 会连他们的后台地址 在vue.config.js中的proxy来控制与哪个后台对接 但是每次切换后台接口地址的时候项目都需要重新启动才可以 有没有什么方案可以切换后台地址不重启项目就能直接开发呢回答：提供一种脑洞较偏的思路：把 proxy 的 targte 重定向的目标改为一个平常访问不到或不需访问的域名，比如 facebook.com ，然后安装一个 switchH...
2024-03-10
vue-cli脚手架安装
vue-cli脚手架安装1.首先安装npm和node.js2.安装webpack和vue-clivue全家桶之一的vue-cli可以帮我们快速搭建vue项目1.首先安装npm和node.js进入npm官网点击安装点击下载一般下载LTS就好2.安装webpack和vue-cli安装完毕后打开node.js的控制台先分别输入node -v和npm -v检查是否安装成功如果出现了版本号就表示...
2024-01-10
安装vue-cli脚手架
一、安装node.js 1、什么是node.js？ Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统。 只需要在官网上下载对应的系统软件安装上即可（http://nodejs.cn/）...
2024-01-10
vue-cli3组件嵌套
如下项目：App.vue 父组件<template> <div id="app"> <Vheader/> <! -- 使用组件 将子组件Vheader.vue作为父组件App.vue的头 --> <img alt="Vue logo" src="./assets/logo.png"> <h1>{{res}}</h1> <! -- res是父组件自己的数据 --> </div></template><script>import Vheader from './components/...
2024-01-10
vue-cli4路由懒加载失效
将项目由vue-cli2升级到了vue-cli4，已经能正常dev和build了，build后的代码也可以正常部署在Nginx进行访问，但是build后的dist/ static/js中只有几个比较大的js文件，可见路由对应的组件没有被拆分打包以上是build后的文件在之前的vuecli2中还是可以的相关代码(router/index.js){path: '/myAccount',fullPath: '/myAccount',hidd...
2024-01-10
vue-cli3文件的引入
在vue-cli中引入图片、音乐等文件，如下：<template> <div id="app"> <h1>{{msg}}</h1> <ul v-for="(item,index) in items"> <li>{{item}}</li> </ul> <audio :src="audioSrc" autoplay="" controls=""></audio> </div></template><script>import audio1 from "./assets/audio....
2024-01-10
vue-cli快速原型开发
我们知道vue-cli提供了一套如何快速搭建vue开发脚手架的工具，虽然好用，但是有的时候我们还是嫌麻烦，因为就想快速开发调试一个组件，这时我们就可以使用vue-cli 3.x以上版本的一个好特性： vue serve了！具体的：1. 先uninstall掉老版本的vue-cli， npm uninstall vue-cli -g2. 安装新版本的vue-cli(注意名字也变...
2024-01-10
在vue-cli中使用路由
1.首先npm中是否有vue-router一般在vue-cli的时候就已经下载好了依赖包了2.使用vue的话正常的需要涉及这几个文件demo/src/router/index.jsimport Vue from 'vue'import Router from 'vue-router'import Hello from '../components/Hello'//首页import Test from '../components/test'//需要跳转的页面 给组件重新命名Vue.use(Router)ex...
2024-01-10
vue-cli3分环境打包
1.package.json添加命令scripts": {“dev”: “vue-cli-service serve”, //本地运行时process.env.NODE_ENV ===‘development’(默认)“build:pre”: “vue-cli-service build --mode pre”, //dev模式下打包(测试服打包)，process.env.NODE_ENV的值为’.env.dev文件中NODE_ENV声明的值’“build”: “vue-cli-service build”...
2024-01-10
vue-cli路由的一些补充
上一节，学习了vue-cli的一些常见用法，接下来，来学习一下vue的另外一些常见的用法。 1.路由的router.go|push|repale方法 这些方法的作用都是导航到不同的url. push:当你单击，<router-link :to="/user">标签的时候，在程序内部其实是执行了router.push（".user"）。这个方法。 go:router.go(n)...
2024-01-10
vue-cli4.5打包取消压缩代码
如何在vue.config.js里面配置不压缩hmtl,css,js代码?回答：Vue CLI - webpack 相关你可以修改 vue-cli 集成好的 webpack 插件配置项。默认 JS 压缩用的是 TerserWebpackPlugin；CSS 压缩用的是 MiniCssExtractPlugin + OptimizeCssnanoPlugin；HTML 压缩用的是 HtmlWebp...
2024-02-08
Vue-cli脚手架工具
klmhly 已关注2018.05.21 17:50* 字数 198 阅读 29评论 1喜欢 0一. 在命令行安装脚手架Vue-cli是官方提供的脚手架工具，里面默认继承了express以及webpack打包工具。1. 1 安装Vue-clinpm install -g Vue-cli ...
2024-01-10
vue-cli2升级到webpack4
修改配置1.替换插件 extract-text-webpack-plugin，使用 webpack4 推荐使用的插件 mini-css-extract-pluginbuild/webpack.prod.conf.js// ...省略// const ExtractTextPlugin = require('extract-text-webpack-plugin')const MiniCssExtractPlugin = require('mini-css-extract-plugin')// ...省略//...
2024-01-10
深入理解Vue-cli4路由配置
目录前言-vue路由一、最基本路由配置1.配置router/index.js2.配置App.vue二、路由懒加载技术三、路由嵌套四、动态路由1.动态路由配置2.动态路由传参总结前言-vue路由Vue-router是Vue官方的路由插件,与Vue.js深度集成.在使用了vue-router的单页面应用中,url的改变会引起组件的切换,从而达到页面切换的效果,所以如...
2024-01-10
深入理解Vue-cli4路由配置
目录前言-vue路由一、最基本路由配置1.配置router/index.js2.配置App.vue二、路由懒加载技术三、路由嵌套四、动态路由1.动态路由配置2.动态路由传参总结前言-vue路由Vue-router是Vue官方的路由插件,与Vue.js深度集成.在使用了vue-router的单页面应用中,url的改变会引起组件的切换,从而达到页面切换的效果,所以如...
2024-01-10
Vue：使用vue-cli（二）
一、安装npm install -g vue-cli二、初始化项目vue init webpack my-project三、启动项目cd my-projectnpm run dev...
2024-01-10
安装vue-cli报错内容是这个
这个是敲了sudo vue init webpack name之后百度了 permission denied 的报错 又安装了sudo npm install webpack -g --unsafe-perm=true --allow-root又装了一遍 还是报这个错 这是为啥回答意思是没有权限创建文件，有些系统的命令行需要通过管理者模式打开才行。...
2024-01-10
vue-cli按需加载，懒加载组件
vue来做一个单页面应用，当我们的项目越来越大，组件越来越多的时候，首次启动项目户特别慢，就算做一个加载框，蒙层之类的，体验也不会好，这个时候就需要按需加载1.什么叫按需加载 所谓按需加载，顾名思义，就是当我需要的时候再给我，我不要的时候，你就老老实实待着2...
2024-01-10
基于vue-cli配置移动端自适应
移动端自适应：手淘的 lib-flexible + rem配置 flexible安装 lib-flexible在命令行中运行如下安装：1npm i lib-flexible --save 引入 lib-flexible在项目入口文件 main.js 里 引入 lib-flexible12// main.jsimport \'lib-flexible\' 添加 meta 标签在项目根目录的 index.html 中添加如下 meta1<meta name="viewport" con...
2024-01-10
