Vue CLI

一般情况下，通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。 但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，因为把配置的static文件夹当成了根路径，那么要解决这种问题，就得引用相对路径。 解决办法 打开 webpack.prod.conf.js 找到 output ：增加 publicPath: './', 即可，如图： 也可在 config 文件夹下的 index.js 中修改 assetsPublicPath: './' 同样也可以达到资源的相对引用。 背景图引入问题 上面虽然解决了资源路径的引用问题，但是资源里面的背景图片，不像index.html中加载资源一样，通过./static/js/app.js引用可以正常加载，图片资源是通过css加载的，如 background:url('../../static/img/base/title.png'); 被相对打包后变成了 url(static/img/base/title.0cf9ae0.png) 所以我们要保留css引用图片的正常路径，就需要修改 build 文件夹下的 utils.js 代码，如图所示： 也可以不改配置用数据的形式解决： <div :style="bg"></div> export default { data() { return { bg: {

vue cli3 项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/xx.png, 我们希望改为 https://oss.xx.com/img/xx.png 思路: 了解到 publicPath 可以修改项目内静态文件的引用路径, 尝试这样修改 module.exports = { .. publicPath: 'https://oss.xx.com/img' .. } 但这样修改publicPath会使所有静态文件(js, css, img等)都走这个路径, 如果只想针对img文件走cdn的话需要在 chainWebpack 里修改图片类型文件的 file-loader 配置项, 单独配置其 publicPath. 像这样: module.exports = { chainWebpack: config => { config .module .rule( "images" ) .test( /\.(jpg|png|gif)$/ ) .use( "url-loader" ) .loader( "url-loader" ) .options({ limit: 10 , publicPath: 'https://oss.xx.com/img' ,

vue参考---vue-cli 3.*初始化项目 一、总结 一句话总结： 直接去看官方文档就好：vue create hello-world创建一个新项目，运行npm run serve 二、vue-cli 3.*初始化项目 博客对应课程的视频位置： 来源： oschina 链接： https://my.oschina.net/u/4404541/blog/4258010

参考文章： https://www.wandouip.com/t5i35466/ 在此感谢 本篇接着上一篇: windows10使用npm安装vue、vue-cli 首先Django项目是搭建好的，就是新建一个Django项目，然后建一个app 在terminal运行命令： vue-init webpack vuepro 其中vuepro是我web前端项目名即vue的项目名称，操作如下 然后打开terminal窗口，输入 cd vuepro 接着 npm i element-ui -S 运行 npm run build ，出现错误：'vue-cli-service' 不是内部或外部命令，也不是可运行的程序 或批处理文件。 百度了一圈，好多说删除目录node_modules文件夹，重新安装。。。。也没捣鼓好，我直接重新安装的vue-cli，重启pycharm 全局卸载： npm uninstall vue-cli -g 全局安装： npm install vue-cli -g 。。。。。还是出错误 只能重新整合项目，因为一开始我用下载的项目直接替代了新建的vue的项目，像package.json等这些都是配置文件，和自己的电脑环境相符合，不能替换，像src下的App.vue也先别替换，即新建的vue项目和下载的相重的就都先别替换，一点点修改成自己的 重新建了vue项目直接运行是可以

VUE参考---vue-cli3与2版本的区别 一、总结 一句话总结： *、【还是vue2，webpack4】：vue-cli3是基于webpack4打造，vue-cli 2还是webapck 3 *、【0配置】：vue-cli3的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录 *、【vue ui可视化配置】：vue-cli3提供了vue ui命令，提供了可视化配置，更加人性化 *、【新增public文件夹】：移除了static文件夹，新增了public文件夹，并且index.html移动到public中 1、运行的命令一般保存在什么文件中？ 一般是***rc，rc就是run command 二、vue-cli3与2版本的区别 博客对应课程的视频位置： 来源： oschina 链接： https://my.oschina.net/u/4344137/blog/4257833

webstorm识别webpack中的@别名 方法一(推荐): 不需要配置.直接导入node_modules/@vue/cli-service/webpack.config.js.内容如下: // 这是原生的,不需要写入任何配置. // this file is for cases where we need to access the // webpack config as a file when using CLI commands. let service = process.VUE_CLI_SERVICE if (!service || process.env.VUE_CLI_API_MODE) { const Service = require('./lib/Service') service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd()) service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV) } module.exports = service.resolveWebpackConfig() 方法二: 自己新建一个配置,然后在webpack中设置使用该配置(新版本的webstorm中已失效) 'use strict' const

前言 　　本人并不是前端开发人员，不过前端的界面和交互也没少写。以下整理一下我在使用elementUI过程中遇到的问题和对应的解决方案。 正文 1.表格字段过长省略 　　elmentUI的table-column有提供属性 show-overflow-tooltip 只要在对应的字段上设置为true，则文本超出部分就会用省略号替代，并且鼠标移至其上时，可查看完整信息。 2.如何获取行数据作为方法参数？ 　　如果要为表格的每一行都添加操作按钮，如删除。这些删除按钮绑定的是同一个方法，那么如何区分是谁调用的呢，答案就是在方法中传入参数，而这些参数就是在渲染的时候写死在@click的方法参数里面。获取本行数据的方法就是scope.row.xxx，其中xxx就是本行数据的某一个属性。如：@click="delete(scope.row.id) 3.<el-dropdown-item>如何绑定事件？ 　　发现<el-dropdown-item>指定@click是没有响应的。官方的使用方法是，在command属性指定操作命令，然后在<el-menu>里面制定用于处理command的操作方法，例如@command="handleCommand"，然后在里面类似做switch的操作，即根据不同的值来进行对应的操作。还有就是command可以直接就是方法名，然后在handleCommand方法里面

起因 最近因公司需求，需要实现主题换肤功能，不仅仅是颜色的更改，还需要包括图片，字体等文件等更换，因此在百度里各种实现方案后，决定根据scss+style-loader/useable做换肤。 项目开始 首先我们用vue-element-admin这个开源的后台管理系统项目来做demo演示，为了便于做二次开发，下载vue-admin-template来开发。 // 从github下载vue-admin-template clone https://github.com/PanJiaChen/vue-admin-template.git cd vue-admin-template npm install npm run dev 运行成功后的效果  安装style-loader处理器 因为vue-admin-template项目是添加过sass-loader依赖的，所以不用我们再次安装，在上一步就已经安装好了。 npm install style-loader --save-dev 创建主题文件 在src目录下创建theme-chalk、theme-light主题文件夹 在两个主题目录下创建index.useable.scss文件  在index.useable.scss中写入样式 // theme-chalk/index.useable.scss body {

------------恢复内容开始------------ Vue.js---脚手架vue-cli傻傻的分不清楚 B站视频地址： https://www.bilibili.com/video/BV1n7411T78U node.js--->>npm(git, maven) 完整的生态圈 --> 下载其他模块 下载webpack 3.0和4.0版本 手动搭建vue.js vue-cli 2.x 3.x 4.x(1.可以基本忽略大量的webpack配置 2.直接支持更新) SPA: single page appilication 单页面应用程序，通过vue-router路由来跳转到不同的模块 unit tests(按空间切割，对每个组件都进行测试); e2e tests(按时间事件，对每个流程进行测试) node.js express;webpack-dev-server支持热更新 1. 下载node.js, 安装npm, 安装vue 可以参考这篇： https://www.cnblogs.com/jane-panyiyun/p/12113539.html 2. 静态资源 3. node.js webpack-dev-server 热更新 代码段改变界面也改变了 4. 简化代码，体会模块，template的view层，脚本里面的数据模块 < template > < div id

1全局安装vue-cli 输入命令：npm install vue-cli -g 2创建项目框架 输入命令：vue init webpack vueapi 3依次按照提示输入，项目名、项目描述、项目作者等等， 4.进入vueapi目录 输入命令： cd vueapi 5.安装element-ui 输入命令：npm i element-ui -S 因为是基于Vue.js和elementUI进行的项目开发，所以当然要导入Vue.j包和elementUI包： npm install --save vue element-ui 6.安装vue-router 要进行页面跳转，所以要用到vue-router： 输入命令：npm install --save vue-router 7.安装axios 要从后端获取数据，所以要ajax请求，用vue官方推荐的axios： 输入命令：npm install --save axios 启动项目 输入：npm run dev 构建vue项目目录大致如下： buid：构建脚本目录 config：构建配置目录 node_modules：依赖node工具包目录 src：源码目录 assets：资源目录 components：组件目录 router： App.vue 页面vue组件 main.js：页面入口js文件 static ：静态文件目录 test