Vue CLI

一、下载安装nodeJs 基于node.js,利用淘宝npm镜像安装相关依赖。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像 -- npm install -g cnpm --registry=https://registry.npm.taobao.org 二、第一种方法，直接下载vuejs 　 可以查看vue所以版本 　安装vue最新版本 　 　可以下载最新的vuejs版本 然后直接在你的项目中引入js文件，即可使用vue 三、第二种方法，使用vue-cli创建vue项目 　　1.安装vue-cli脚手架构建工具 　　2.查看vue信息 　　 注意：V大写 　　3.用vue-cli构建项目 　　 （项目名称必须小写） 　　 4.安装依赖 　　 （必须切换到新创建的项目文件夹下） 　　 项目创建成功 　 5.启动程序 　　 　　我的8080端口已经启动了，所以需要修改端口号，配置文件 config>index.js 来源： oschina 链接： https://my.oschina.net/u/4401867/blog/4254202

Vue.js介绍 基本概念 Vue.js 是目前最火的一个前端框架 React是最流行的一个前端框架 React除了开发网站，还可以开发手机原生App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并称为前端三大主流框架 Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或已有项目整合 Vue有丰富的配套三方类库，可以整合起来做大型项目的开发 官网 English Site 中文网站 介绍 Vue.js是一个渐进式框架，动态构建用户界面 作者：尤雨溪 华裔 前Google 工程师 特点 Vue.js 是基于MVVM架构 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目 参考了React的组件化和虚拟DOM技术，借鉴了angular的模板和数据绑定技术 Vue的生态 Vue.js 关注UI层面 工具 DevTools vue-cli: vue 脚手架 vue-loader 核心插件 vue-router: 路由,vuex: 状态管理,vue服务器端渲染,vue-resource(axios): ajax 请求 MVC、MVP、MVVM 1. MVC 概念 1.

1、如果之前有全局安装过vue-2，先卸载掉 cnpm uni -g vue-cli 2、安装vue-cli3 cnpm install -g @vue/cli 3、可以使用vue ui 进入图形界面创建项目 4、也可以使用命令行进行创建 来源： oschina 链接： https://my.oschina.net/u/4346445/blog/4253691

在vue 2.9.6中，搭建vue-cli脚手架的流程是这样的： 首先 全局安装vue-cli，在cmd中输入命令: npm install --global vue-cli 安装成功： 安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。 然后就可以构建项目了，依次输入命令： vue init webpack “名称” cd 名称（进入到创建的项目中） npm install (安装项目的依赖) npm run dev (启动项目) 然后在浏览器中输入localhost:8080就可以启动我们创建的项目啦 此时，我们在 package.json 可以看到的版本信息： 构建好的项目目录是这样的： Vue CLI 3.0搭建 如今，官方文档已经升级3.0，在 vue-cli 3.0中，我们需要重新配置： 如果你已经安装了vue 2.9.6 的话，则需要先将其删除：指令为： npm uninstall -g vue-cli 提示：Vue CLI要求Node.js版本8或者更高（8.10.0+ 推荐）。 第二步：更新Vue-cli 指令： npm install -g @vue/cli 或 cnpm install -g @vue/cli 或 yarn global add @vue/cli （这里我用的 cnpm 安装的

vue-cli版本在3以上 全局安装vue-cli npm install -g @vue/cli 建立项目工程，假设项目建在e:\vueProject\vue-cli3.0+目录下： 先进入此目录： cd e:\vueProject\vue-cli3.0+ 回车 e: 回车 建立项目工程： 第一种方法： vue create vueproject01 可以选择第一个（默认创建的工程），这里选择下面第二个Manually select features 键盘上下箭头选择，按空格键选中，需要安装的组件 Ctrl+C取消安装 装好后，启动项目 cd vueproject01// 进入到项目根目录 npm run serve// 启动项目 第二种方法（ui界面）： 自己手动创建项目，直接命令行输入vue ui，回车 浏览器输入运行出的网址（例如： http://localhost:8000 ） 开始创建项目： 点击创建 运行项目，跟控制台npm run serve效果一样的 具体教程参考： https://www.imooc.com/video/18559 来源： oschina 链接： https://my.oschina.net/u/4368772/blog/3436963

vue-cli3.0使用axios的时候出现错误，记录一下 报错信息： Uncaught TypeError: Cannot set property $axios of #<Vue> which has only a getter at eval (main.js?56d7:12) at Module../src/main.js (app.js:11102) at __webpack_require__ (app.js:724) at fn (app.js:101) at Object.0 (app.js:11283) at __webpack_require__ (app.js:724) at app.js:791 at app.js:794 vue-cli3.0安装插件的时候要注意区分vue-cli2.0的命令 安装： // vue-cli2.0命令 $ npm install axios // vue-cli3.0命令 $ npm add axios 使用： 1 .首先在main.js里边把axios实例挂载到Vue原型上 坑点: 命名的时候不能使用"axios"这个字段 import axios from 'axios' Vue.prototype.$ajax = axios 2.在需要发送请求的地方使用"$ajax" this.axioss.get('/api

1. Vue-cli3.0项目节省了很多文件，比如讲vue-cli3.0之前版本的build/dev-server.js配置放在了vue.config.js中。 2. 在Vue-cli3.0项目的vue.config.js或vue-cli3.0之前版本的build/dev-server.js中配置： const express = require('express') const app = express() var singer = require('./src/db/data/singer.json') //本地json文件数据 var recommend=require('./src/db/data/recommend.json') var apiRoutes = express.Router(); app.use('/api',apiRoutes) module.exports = { devServer:{ before(app) { app.get('/api/singer', (req, res) => { res.json({ errno: 0, // 这里是你的json内容 data: singer }) }) app.get('/api/recommend', (req, res) => { res.json({ errno: 0, //

PostCSS的插件 作用：用于自动将像素单元生成rem单位 记以下三种 postcss-plugin-px2rem postcss-pxtorem postcss-px2rem 任选一种，最近大家推荐第一种（在配置上多了配置选项上有 exclude 属性，可配置是否对 某个文件夹下的所有css文件不进行转换），之前我用的第二种（也是目前使用最多的） 都有可以配置 selectorBlackList: [] 要忽略并保留为px的选择器 还有个小技巧 -- 如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。 使用方法 选择你要用的插件安装依赖： npm i postcss-plugin-px2rem -D 或 npm i postcss-pxtorem -D 或 npm i postcss-px2rem -D 配置方法 换算单位 pc端一般基数为37.5，移动端一般为16或者32 用 vue init webpack projectName 创建的项目，postcss配置文件在根目录下 .postcssrc.js （该文件为使用vue init自动创建的文件） module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, "autoprefixer": {}, // 新增 /** *

vue-vli3创建的项目配置热更新 问题描述：使用vue-cli3创建的项目，修改代码之后，浏览器页面不会自动刷新，然而之前使用webpack初始化的vue项目修改代码之后浏览器会重新加载一下，因为webpack初始化的项目可以在 webpack.config.js 配置热更新，具体配置下文见 解决： 使用 vue ui 导入当前项目，勾选启动运行时编译，可以做到热更新。 附0 VUE UI使用方法 附1 之前项目的webpack.config.js配置 webpack.config.js var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin') var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var Proxy = require('./proxy'); var fs = require('fs') // 定义文件夹的路径 var ROOT_PATH = path.resolve(__dirname); module.exports = { devtool: 'source-map', // 配置生成Source Maps

echarts 提供了直观，交互丰富，可高度个性化定制的数据可视化图表。而vue更合适操纵数据。 最近一直忙着搬家，就没有更新博客，今天抽出空来写一篇关于vue和echarts的博客。下面是结合地图的一个小的 echarts demo ，我在使用npm的时候对比了echarts和vue-echarts两个依赖，最后决定使用echarts依赖包，因为它更接近原生，使用现实更小，如果对vue生命周期比较了解，那就更容易操作。下面讲一下做出这样一个echarts图。 一 基础的echarts图表制作 1.首先在vue项目中引入echarts并全局配置 npm install echarts --save 在main.js中引入并挂在到vue的prototype上 import echarts from "echarts" ; Vue.prototype.$echarts = echarts; 2.创建一个装载echarts图表的盒子 <div id="chart1"></div> 差不多就是这样，设置一个id即可。 3.按需引入需要的echarts组件 4.在data里面配置好echarts的配置项和数据 5.在mounted生命周期中初始化echarts图表，在对应的方法中获取echarts节点并渲染。 首先在mounted中调用初始化函数 this .drawLine();