Vue CLI

1、ERR引发的思考 创建好的 vue 项目直接执行 vue run dev 报错？运行 vue run serve 就可以启动...如下 npm run dev npm ERR! missing script: dev npm ERR! A complete log of this run can be found in: npm ERR! E:\nodejs\node_cache\_logs\2018-12-12T15_06_08_674Z-debug.log 2、dev build serve? 其实 npm run dev 或者是 npm run serve 等 npm run xxx 并不是一定要这么写。 npm run XXX是执行配置在 package.json 中的脚本，比如： "scripts": { 　　"serve": "vue-cli-service serve", 　　"build": "vue-cli-service build", 　　"lint": "vue-cli-service lint" }, npm run xxx 中的 xxx 可以理解为键值对的 key，实际上 run 的是在 package.json 里面 scripts 配置的 value； 比如，npm run serve 实际运行的是 vue-cli-service serve；

适用人群 1、想要学习前后端分离开发的小伙伴。 2、有一定Django基础的小伙伴。 3、有一定HTML+CSS+JS基础的小伙伴。 课程概述 本课程从零讲解Vue全家桶（vue+vue-cli+vue-router+vuex+axios），以及Django中非常流行的django-restframework前后端分离框架，讲解非常仔细到位。项目部分是用vue+django打造的一个电商项目，有移动端（H5网站），PC端。项目中涉及商家、商品、购物车、支付等功能。不管你是做运维还是做测试还是做开发，学完本课程都能有很大的收获 攻城狮： http://www.54gcshi.com/forum.php?mod=viewthread&tid=194 目录 章节1:Vue基础，领优惠+微信:zhiliaoketang008 再买试看 课时1视频【Vue基础】VSCode介绍13:08可试看 课时2视频【Vue基础】Vue体验14:43 课时3视频【Vue基础】v-bind属性绑定12:06 课时4视频【Vue基础】VSCode添加自定义代码片段11:51 课时5视频【Vue基础】Class和Style属性绑定15:28 课时6视频【Vue基础】执行JavaScipt表达式10:00 课时7视频【Vue基础】v-if条件判断15:34 课时8视频【Vue基础】v-show和v-if10

项目架构 开始 vue init webpack 项目名称 //新建项目,cd进入新项目 npm install axios //先安装！ npm install --save axios vue-axios //然后！ npm install vuex --save //安装vuex npm i vant -S //安装vant，Ui框架，选择性安装 npm install babel-plugin-import -D // 与vant是绑定安装关系 配置babelrc文件 "plugins": [ "transform-vue-jsx", "transform-runtime", ["import", [{ "libraryName": "vant","libraryDirectory":"es","style": true }] ] 然后可以在模块中引入或全局引入，本人采用全局引入 import { Button } from 'vant' Vue.use(Button) npm install --save-dev node-sass sass-loader //安装sass npm install mockjs //选择性安装，mock数据 打开webpack.base.config.js在loaders里面加上 { test: /\.scss$/, loaders: [

1.安装axios (在项目中) npm i axios 　　 2.创建axios.intercept.js 内容如下 // 配置axios拦截器 import axios from 'axios'; import store from '../store'; // 追加token // 创建axios实例 const service = axios.create({ // baseURL: process.env.VUE_APP_URL, // api 的 VUE_APP_URL timeout: 50000 // 请求超时时间 }); // request拦截器,在请求之前做一些处理 service._requestCount = 0; // 接口请求累加 service.interceptors.request.use( config => { service._requestCount++; store.commit('handleLoading', true); // 接口请求loading return config }, error => { console.log(error) // for debug Promise.reject(error) } ) // response 拦截器,数据返回后进行一些处理 service.interceptors

之前一直使用json-server在前端开发时，搭建本地数据接口测试，但有时又需要将做好的项目放于 github page上做项目演示。在本地时，json server很好使用，但一旦放在github上就实现不了我们期望的效果了；后来发现 mockjs 这个插件就满足这一需求。研究了半天，感觉 mockjs 模拟数据更强大，通过随机数据，可以模拟各种场景，下面一步步的来实现在 vue-cli创建的项目中添加一条用户信息的数据模拟接口： 安装 mockjs 在vue项目安装mockjs npm install mockjs --save-dev 在项目 src 目录中创建一个 mock.js 文件 在 main.js 入口文件中引入刚刚创建的mock 文件 import './mock.js' 创建模拟数据 在 mock.js 中创建一条用户信息模拟数据 import Mock from 'mockjs' const Random = Mock.Random // 设置全局延时，没有延时的话，有时候会检测不到数据变化 Mock.setup({ timeout: '300-600' }) // 创建一个数组用来接收模拟的数据 const mocklist = [] const count = 5; for (let i = 0; i < count; i++) { mocklist

Git应用详解第一讲：Git分区、配置与日志 前言 曾经听到过这样一句话：不会「git」就不要敲代码了。细细品味确实有其中的道理，可能是当事人代码被强行覆盖后的叹息吧！ 因此，为了避免这种情况，接下来我们就一起来好好学习「git」的相关知识吧！不怕你不会，就怕你不看！ 一、git的三个分区 工作区（working directory） 暂存区（stage） 版本库 它们之间的关系为： 通过「git status」查看「git」状态时，「红色」的文件表示在「工作区」；「绿色」的文件表示在「暂存区」： 工作区中的文件只要通过「git add」命令添加进了「Git」仓库，就会被追踪。 ❝ 暂存区也称为「index」，不过常使用「stage」表示。 ❞ 二、git常用命令 详见《「Git常用命令整理」》 三、git配置 1.git config 可以通过三个地方的三个文件设置git配置参数，分别代表三个不同的作用域： 「/etc/gitconfig」：作用域：一台计算机（操作系统）上的所有用户，几乎不会使用，「优先度低于」--global；设置方法： git config --system 「~/.gitconfig」：作用域：计算机中的某用户创建的所有项目，常用，「优先度低于」--local；设置方法： git config --global 「.git/config」 ：作用域

npm 安装vue-cli： vue cli的包名称由vue-cli改成了@vue/cli 如果你再以前已经安装了vue-cli 那么你需要先将老版本卸载。 卸载命令： npm uninstall vue-cli -g 卸载完成后再去安装新版本cli npm i -g @vue/cli ***有些时候由于网络问题导致下载失败，再次重新下载后会有一个错误的json报错，这个是因为你上一次下载的时候的缓存问题，我们只需要清楚npm缓存就好了， 清楚npm缓存 npm cache clean --force 清楚缓存完成后再重新下载就好了。 再安装cli时还有可能出现-4080错误 ，这个时候说明是权限不够，更换成管理员权限运行即可； 这是win10的PowerShell win7的话就是cmd； 更换成管理员运行后再次重新下载即可安装；安装完成后查看版本号，如果正确显示说明安装成功 vue -V 安装成功后让我们来构建一个项目： 依旧再命令提示符中使用命令 vue create myprojrct 之后进入到我的项目的路径 默认是给提示的， 执行代码 cd myproject npm run serve 到这一步我们就可以再本地用端口访问vue了 很明显这个标题就是我们的项目名称。 来源： oschina 链接： https://my.oschina.net/u/4403195

Vue Vue-cli Eslint 在vscode里代码自动格式化 HuaRongSAO 关注 2017.10.19 11:28* 字数 189 阅读 10396 评论 5 喜欢 12 vue eslint 代码自动格式化 vue-cli 代码风格为 JavaScript Standard Style 代码检查规范严格，一不小心就无法运行，使用eslint的autoFixOnSave可以在保存代码的时候自动格式化代码 VSCode拓展插件推荐（HTML、Node、Vue、React开发均适用） 建议阅读： vscode插件推荐 JavaScript Standard Style 代码风格规范 正文 eslint 自动格式化 配置环境: npm i -g eslint-plugin-vue #or npm i -S eslint-plugin-vue 创建项目跟路径下的文件：.eslintrc | .eslint.js //　添加插件 "plugins": [ "vue" ] 在你的vscode设置文件里添加： 1、在vscode添加 eslint 插件 2、在vscode添加 vetur 插件 3、修改你的setting.json // 添加进你的vscode的 setting.json "eslint.autoFixOnSave": true, "eslint.validate

点击▲关注 “ 爪哇妹 ” 给公众号标星置顶 更多摄影技巧 第一时间直达 EuiAdmin是基于Vue+Element等组件联合开发的一个免费的开源后台，你可以通过（euiadmin.com）进行下载和体验，此后台免费开源，可以直接免费使用。 免费开源后台主要为了能够减少开发者的时间，可以快速构建一个后台管理系统，为大家提供一个简单的学习环境。 1. 亮点 1、 支持后台自定义 2、 多页面自定义 3、 TinyMce富文本支持 4、 左侧菜单收缩、伸展 5、 Echarts图表支持 2. 主要 JavaScript 库 Vue+Element-Ui+vue-router+vue-cookies+echarts，通过四个JavaScript库你可以更简单的更快的使用后台。 3. EuiAdmin 图片集 登录 集成登录+注册+密码找回 主页 富文本 集成Vue最强tinymce富文本编辑器，可以满足基础的文本编辑 丰富动画 Animate动画助力EuiAdmin成长，可以直接将需要的动画进行选择将"动画 class名"的内容放到需要的class中便可以实现动画 用户表格 所有数据为JavaScript数据虚拟生成，如有雷同纯属意外。支持页面和条数切换 Echarts图表 常用网站设置-网站设置 高级自定义 可以自定义网站基础颜色、菜单颜色等 4. 怎样获取 你可以通过访问 www

EuiAdmin是基于Vue+Element等组件联合开发的一个免费的开源后台，你可以通过（euiadmin.com）进行下载和体验，此后台免费开源，可以直接免费使用。 免费开源后台主要为了能够减少开发者的时间，可以快速构建一个后台管理系统，为大家提供一个简单的学习环境。 1. 亮点 1、 支持后台自定义 2、 多页面自定义 3、 TinyMce富文本支持 4、 左侧菜单收缩、伸展 5、 Echarts图表支持 2. 主要 JavaScript 库 Vue+Element-Ui+vue-router+vue-cookies+echarts，通过四个JavaScript库你可以更简单的更快的使用后台。 3. EuiAdmin 图片集 登录 集成登录+注册+密码找回 主页 富文本 集成Vue最强tinymce富文本编辑器，可以满足基础的文本编辑 丰富动画 Animate动画助力EuiAdmin成长，可以直接将需要的动画进行选择将"动画 class名"的内容放到需要的class中便可以实现动画 用户表格 所有数据为JavaScript数据虚拟生成，如有雷同纯属意外。支持页面和条数切换 Echarts图表 常用网站设置-网站设置 高级自定义 可以自定义网站基础颜色、菜单颜色等 4. 怎样获取 你可以通过访问 www.euiadmin.com ，登录后台后，点击"获取源码获取"