Vue CLI

需要在文件根目录手动创建一个vue.config.js文件； // 用于处理文件与目录的路径； const path = require("path"); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { publicPath: "/", //部署应用时的根路径 devServer: { port: 9000, // 端口号 host: "jianshi.com", // 如需配置本地域名，打开C:\Windows\System32\drivers\etc文件夹，输入自己的ip地址配置即可，如下图 https: false, // https:{type:Boolean} open: true, //配置自动启动浏览器 hotOnly: true, // 热更新 // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理 proxy: { "/api": { target: "http://192.168.3.6:8000/v1", //后端接口地址 ws: false, //websocket； changeOrigin: true, //是否允许跨域 pathRewrite: { "^/api": "/", //直接用'api

先在项目里打开cmd 输入npm i element-ui -S回车，然后在配置 npm i element-ui -S 在 main.js 中写入以下内容： import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); 安装 axios : npm install axios//生产环境 npm install --save axios vue-axios//测试环境 两者都下载 在 main.js 中写入以下内容： import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) 在页面中的用法： Vue.axios.get(api).then((response) => { console.log(response.data) }) this.axios.get(api).then((response) => { console.log(response.data) }) this.

参考： https://blog.csdn.net/mr_orange_klj/article/details/104226409 一个流程下来几乎无报错； 项目结构和vue-cli3搭建出来的一样，写法几乎无差异： 最后打包时和前面的用electron-vue做的一样，winCodeSign和nsis，注意下载对应包放到对应位置，加快打包速度。 来源： oschina 链接： https://my.oschina.net/u/3455362/blog/4693546

如果原本有下载node，可以把它先卸载，然后，点击这个网址下载（很快的) https://cdn.npm.taobao.org/dist/node/v14.14.0/node-v14.14.0-x64.msi 这个网址下载的node，可以自动配置环境变量，省下一大推事儿。 接下来，下载cnpm，提高速度何乐而不为呢？ 在cmd，记得是用管理员身份打开，输入 npm install -g cnpm --registry=https://registry.npm.taobao.org 查一下版本 用cnpm安装vue cnpm install -g @vue/cli 安装vue cli 的时候，配置一下环境变量 用 vue --version 或者 vue -V (V是大写)，查看一下版本 然后啊，干什么呢？可以在命令行敲下 vue ui ，开始熬夜吧，尊敬的打工人，嘿嘿。 （本人是菜狗，文章可能有错的地方，欢迎大佬们的批评与指正） 来源： oschina 链接： https://my.oschina.net/u/4290521/blog/4692186

一、Node.js 1.基本概述 Node.js是一个可以让JavaScript运行在服务器端的平台。它是一个为实时Web应用开发而诞生的平台，它从诞生之初就充分考虑了在实时响应、超大规模数据要求下架构的可扩展性。这使得它摒弃了传统平台依靠多线程来实现高并发的设计思路，而采用了单线程、异步I/O、事件驱动式的程序设计模式。 Node.js 有着强大而灵活的包管理器（node package manager， npm），目前已经有上万个第三方模块，其中有网站开发框架，有 MySQL、PostgreSQL、MongoDB数据库接口，有模板语言解析、 CSS 生成工具、邮件、加密、图形、调试支持，甚至还有图形用户界面和操作系统 API工具。 Node.js 可以作为服务器向用户提供服务，与 PHP、 Python、 Ruby on Rails 相比，它跳过了 Apache、 Nginx 等 HTTP服务器，直接面向前端开发。Node.js 的许多设计理念与经典架构（如 LAMP）有着很大的不同，可提供强大的伸缩能力 。 二、安装node.js 下载地址：https://nodejs.org/zh-cn/download/ 具体步骤百度吧 二、搭建node服务器 首先安装一下全局的vue手脚架 vue-cli 命令行执行 : npm install -g vue-cli // 加

前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算 rem 值，要么依靠编辑器安装插件转换。 而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成 rem 。 技术栈 vue-cli：使用脚手架工具创建项目。 postcss-pxtorem：转换px为rem的插件。 自动设置根节点 html 的 font-size 因为 rem 单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小。 原理网上有很多文章分享，这里不具体解释。 1、创建 rem.js 文件 很多人写这种小工具文件会习惯性的加上闭包，这个其实是没有必要的。ES6中每个文件都是单独的一个模块。 // 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const scale = document.documentElement.clientWidth / 750 // 设置页面根节点字体大小 document.documentElement.style.fontSize = (baseSize * Math.min(scale,

一、安装node https://nodejs.org/en/ 直接选择LTS长期支持版下载对应系统安装文件进行安装。 安装完后，打开cmd命令行界面 node -v 查看对应安装版本,例：v12.18.3 安装淘宝cnpm sudo npm install cnpm -g --registry=https://registry.npm.taobao.org 安装yarn(fackbook依赖管理工具与Npm功能一样，推荐使用！！！) npm install -g yarn 通过yarn -v查看安装版本 Yarn 淘宝源安装 yarn config set registry https://registry.npm.taobao.org -g 二、全局安装Vue-cli脚手架 sudo cnpm install vue-cli -g 可通过vue --version查看vue-cli版本号 三、全局安装Webpack打包 sudo cnpm install webpack -g 同样可通过webpack -v查看版本 四、安装http服务 安装npm serve sudo npm install -g serve 安装 http-server npm install http-server -g 五、使用Vue-cli脚手架搭建一个vue页面 <!--- 初始化项目 -->

最近学习Vue，通过vue-cli脚手架创建的项目环境，写了段时间后，发现这个ESlint语法检测真是令人抓狂！！！ 所以必须停下手中的代码去学习下ESlint的规则配置。 其实我并不反对这些语法检测，但是像许多反个人预期的那就真的不得不吐槽了，某种vue-cli脚手架创造的替代eslint规则： 代码末尾不能加分号 ; 代码中不能存在多行空行 tab键不能使用，必须换成两个空格 代码中不能存在声明了但未使用的变量 以上规则个人认为真的反人类！调试代码太难了。 好吧进入正题... 关闭夹棉 这里只说vue-cli脚手架的关闭方法，其实很简单，就是把 build/webpack.base.conf.js 配置文件中的eslint规则注释掉即可。 module: { rules: [ // { // test: /\.(js|vue)$/, // loader: 'eslint-loader', // enforce: 'pre', // include: [resolve('src'), resolve('test')], // options: { // formatter: require('eslint-friendly-formatter') // } // }, ... ] ... } 然后： 世界都安静了！有木有。 以上皆为年轻不懂事的吐槽，eslint检测是必要的

1、更改vue.config.js 中的publicPath的参数本地=>>publicPath: '/' 打包需要更改成publicPath: './'。 2、打包之后如果出现路径404的问题，需要把路由router的index.js中的mode: 'history',改成mode: 'hash'。这样就可以解决路径404的问题。 来源： oschina 链接： https://my.oschina.net/u/3803573/blog/4300812

官方文档地址： ​ ThinkPHP6.0: https://www.kancloud.cn/manual/thinkphp6_0/1037479 ​ ElemetUI: https://element.eleme.cn/#/zh-CN ​ axios: https://www.kancloud.cn/yunye/axios/234845 ​ Vue: https://cn.vuejs.org/v2/guide 创建码云仓库 克隆到本地 git clone 你自己的仓库地址 0608 创建数据库 -- 创建数据库 0608 create database `0608` charset utf8; -- 创建数据表 user create table `user` ( `id` int(11) primary key auto_increment comment '用户ID', `name` varchar(30) not null default '未知' comment '用户名', `pwd` varchar(32) not null default '未知' comment '用户密码' ) engine = InnoDB; -- 给 user.name 添加唯一索引 alter table `user` add unique key u_name(`name`); -- 给