vue-cli安装
近期梳理了一下win和linux下安装vue项目，总结一下，希望对于看的人有帮助，废话不多说。Linux下安装因为我用的是deepin,所以再此就不演示了。首先电脑上已经安装好了node和npm了，如果没有安装的，后期需要npm包管理工具，如果还没有安装的，可以自己百度进行安装。首先查看一下node和npm的版本，...
2024-01-10
搭建vue-cli
1．什么是vue-clivue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板，是为现代前端工...
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-cli3热更新
vue.config.js配置： chainWebpack: config => { // 修复HMR config.resolve.symlinks(true)}}，css: { // 提取 CSS 在开发环境模式下是默认不开启的，因为它和 CSS 热重载不兼容。 //extract: true, ...
2024-01-10
vue-cli踩坑记录
一、奇怪的bug出现有用户反馈在ie11下打不开我们的线上网站，即使开了兼容模式也打不开我们的网站，页面白屏。初步判断，由于css样式资源、页面资源都已经加载到位，排除网络环境问题后，让用户打开控制台截图看一下，白屏的原因是由于JS执行报错阻塞了后续的逻辑执行和渲染。代码...
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-cli 2.0安装vue-clinpm install -g vue-cli创建一个项目模板vue init <template-name> <project-name>template-name:wepack 功能齐全的Webpack + vue-loader设置，具有热重载，linting，测试和css提取功能。webpack-simple 一个简单的Webpack + vue-loader设置，用于快速原型设计browserify 全功能的Browserify + vueify设置，具有热重载...
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-cli脚手架构建过程
vue脚手架构建过程才开始接触前端不久，经常忘记脚手架的构建过程，写给自己看的。1、确保你已经安装好了node.js，并且npm（或cnpm）处于可用状态2、全局安装必要的构建工具webpack和vue的脚手架构建工具vue-cli，命令行如下：cnpm i -g webpack cnpm i -g vue-cli （i是install的简写）3、切换到你需要构建vue...
2024-01-10
vue-cli中配置sass
如何配置sass一、安装对应依赖node模块：npm install node-sass --save-devnpm install sass-loader --save-dev二、打开webpack.base.config.js在loaders里面加上 1 rules: [ 2 { 3 test: /\.vue$/, 4 loader: 'vue-loader', 5 options: vueLoaderConfig 6 }, 7 ...
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按需加载，懒加载组件
vue来做一个单页面应用，当我们的项目越来越大，组件越来越多的时候，首次启动项目户特别慢，就算做一个加载框，蒙层之类的，体验也不会好，这个时候就需要按需加载1.什么叫按需加载 所谓按需加载，顾名思义，就是当我需要的时候再给我，我不要的时候，你就老老实实待着2...
2024-01-10
在使用vue-cli中遇到的几个问题
前言：框架没有好坏之分，能解决需求就可以。之前没事用vue模仿过BOSS直聘App(纯属娱乐)，实际工作中开发过一个后台管理系统，遇到过不少坑，终于闲下来稍微总结几个问题分享一下！一、所遇到的问题(对cli模式开发不熟悉绕路)，以及解决办法1：本地如何配置跨域和后台联调2：如果非要使用jQuer...
2024-01-10
vue是被ionic4抛弃了吗
之前ionic4刚出来的时候，是说会把angular、Vue、React一视同仁的。今天准备开始写收支系统V4安卓app的打包方法，想去升级下ionic4的时候，发现React的版本上去了，但是vue的版本一直都没有动静啊！这是要抛弃vue的节奏吗？...
2024-01-10
怎么让vue-cli支持顶层await
如题 背景是需要在一个入口文件动态引进其他插件，然后再将这些插件暴露出去，顶层await这个语法目前在chrome可以正常使用，但是在vue-cli中会报编译错误，不知有啥解决方案https://github.com/tc39/propo...const libPath = ['client/client','client/lib','page_api/api','report/beaconReport','util/util',]const libPathHandlers = libPath....
2024-01-10
vue-cli构建路径加载资源出错问题
这份文档是对应 @vue/cli 3.x 版本的,官方文档https://cli.vuejs.org/zh/guide/项目打包执行npm run build的时候，打开dist目录的index.html发现资源没有正确加载；例如你的网站根目录是www.xxx.com，当你把dist放到根目录下面，访问www.xxx.com/dist/index.html的时候会出错；因为加载资源会从根目录找也就是www.xxx.com/css/app....
2024-01-10
