vue-cli

一、 组件component 1. 什么是组件？ 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码 组件是自定义元素（对象） 2. 定义组件的方式 方式1：先创建组件构造器，然后由组件构造器创建组件 方式2：直接创建组件 3. 组件的分类 分类：全局组件、局部组件 4. 引用模板 将组件内容放到模板<template>中并引用 5. 动态组件 <component :is="">组件 多个组件使用同一个挂载点，然后动态的在它们之间切换 <keep-alive>组件 二、 组件间数据传递 1. 父子组件 在一个组件内部定义另一个组件，称为父子组件 子组件只能在父组件内部使用 默认情况下，子组件无法访问父组件中的数据，每个组件实例的作用域是独立的 2. 组件间数据传递 （通信） 2.1 子组件访问父组件的数据 a)在调用子组件时，绑定想要获取的父组件中的数据 b)在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据 总结：父组件通过props向下传递数据给子组件 注：组件中的数据共有三种形式：data、props、computed 2.2 父组件访问子组件的数据 a)在子组件中使用vm.$emit(事件名,数据)触发一个自定义事件，事件名自定义 b)父组件在使用子组件的地方监听子组件触发的事件

vue-cli # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖 $ cd my-project $ npm install $ npm run dev 　vue-router import Router from 'vue-router' Vue.use(Router) let router=new Router({ routes: [//路径和页面一一对应 { path: '/home', name: 'Home', component: Home }, { path: '/', redirect: '/home' },//重定向 ] }); //名称代替路径 <router-link class="footer-item" exact to="home">首页</router-link> //打开页面前验证 router.beforeEach((to, from, next) => { if(to.path!=="/logon"&&!store.state.userInfo.Account){ next({ path: '/logon' }) return; }else{ next(); } }) vue

如何使用vue-cli创建项目 首先就是对于环境的要求，node.js一定要全局安装，检查自己是否安装的方式 1、win+r 输入cmd 2、输入npm -v检测npm版本，node -v检测node.js版本 准备完毕，开始准备创建项目（截图不便，下面不再截图，文字示之） 其实也简单 npm i -g @vue/cli 安装全局的vue-cli 进入我们要创建项目的目录下 cd D:/testCreate vue init webpack vue-demo(项目名称) 下面是配置项目的一些内容 ?Project name vue-demo # 项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）。 ? Project description A Vue.js project # 项目描述 ? Author # 作者名称 ? Vue build standalone # 选择运行加编译时 Runtime + Compiler: recommended for most users ? Install vue-router? Yes # 是否需要 vue-router ? Use ESLint to lint your code? Yes # 是否使用

Vue 引入jquery 1,npm install jquery –save-dev 2,在build 找到 webpack.base.conf.js 添加一个对象 var webpack = require(‘webpack’); module.exports 最后添加 // 增加一个plugins plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ] 3，在main.js中引入 $ import $ from ‘jquery’ 如果不想使用规格检查： 在webpack.base.conf.js 中 注释掉包含eslint-loader的部分 vue模板中的table 中必须加<thead></thead> <tbody></tbody>标准化 vue-cli 引入axios 一、npm 安装axios，文件根目录下安装，指令如下 npm install axios --save-dev 二、修改原型链，在main.js中引入axios import axios from 'axios' 接着将axios改写为Vue的原型属性， Vue.prototype.$http=axios 这样之后就可在每个组件的methods中调用$http命令完成数据请求 三、在组件中使用 methods:

　　使用vue+vue-cli+axios+element-ui开发后台管理系统时，遇到一个问题，后台给了一个接口，我这边用axios请求数据，控制台总是报405错误和跨域错误 　　错误 405？ 没见过！！ 查了一下资料， 错误405表示--用来访问本页面的HTTP谓词不被允许，谓词指的就是GET、POST 和 HEAD等。说白了就是请求的方法不被允许！可是，我是完全按照后台给的接口文档写的啊 this.$http({ method: 'POST', url: 'auth/login', data: { 'username': this.username, 'password': this.password } }).then(res => { console.log(res) }).catch(err => { console.log(err) }) 　　（注：$http是我自己封装好的axios Vue.prototype.$http = axios） 　　问题出来哪里呢？ 　　我又看了一下控制台的Network，headers信息显示如下： 　　明明写的是POST请求，怎么到浏览器“嘴里”就变成OPTIONS？ OPTIONS又是什么东西？ 　　继续查。。。。 简单来说，OPTIONS是正式请求之前的一次“预查询”，浏览器先询问服务器

vue-cli 4的常用配置 第一： 在一个vue项目中经常要使用到相对路径来引入组件，但是 '../../../src/' 这样又不太方便 所以会引入在path模块里面的路径解析包，具体使用方法网上很多 https://www.cnblogs.com/skylineStar/p/10282347.html const path = require("path"); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { chainWebpack: config => { config.resolve.alias .set("@", resolve("src")) .set("assets", resolve("src/assets")) .set("components", resolve("src/components")) .set("base", resolve("baseConfig")) .set("public", resolve("public")); }, } 第二： 做vue项目，需要有一个 components 的思想，不然代码的冗余度会很高， 在敲代码的时候巧用组件会提高代码效率和易维护性 暂时还没有学习vuex，但是父子间的通信我觉得就是组件思想的精华

一、package.json里配置添加 1.scripts里添加快捷eslint检查命令 "lint": "eslint --ext .js,.vue src" 2.添加eslint依赖包 "babel-eslint": "^8.2.1", "eslint": "^4.15.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.0.0", View Code 二、根目录下添加检测配置js文件.eslintrc.js // https://eslint.org/docs/user-guide/configuring module.exports = { root: true, parserOptions: { parser: 'babel-eslint' }, env: { browser: true, },

使用vue-cli搭建SPA项目的前提就是搭建好NodeJS NodeJS搭建指路： https://www.cnblogs.com/psyu/p/11302204.html 什么是 vue-cli? vue-cli 是 vue.js 的脚手架，用于自动生成 vue.js+webpack 的项目模板，创建命令如下： vue init webpack xxx 注 1 ： xxx 为自己创建项目的名称 注 2 ：必须先安装 vue,vue-cli ， webpack ， node 等一些必要的环境 安装 vue-cli npm install -g vue-cli 安装成功后，会出现如下文件 安装完成之后打开命令窗口并输入 vue -V （注意这里是大写的 “V” ），如果出现相应的版本号，则说明安装成功。 使用脚手架 vue-cli(2.X 版 ) 来构建项目 vue init webpack spa1 此命令用于创建 SPA 项目，它会在当前目录生成一个以 “spa1” 命名的文件夹 spa1 即为项目名，项目名不能用中文或大写字母，然后终端会出现 “ 一问一答 ” 模式 “ 一问一答 ” 模式： 1.Project name ：项目名，默认是输入时的那个名称 spa1 ，直接回车 2.Project description ：项目描述，直接回车 3.Author ：作者

1、安装vue-cli 打开cmd命令 npm install -g vue-cli npm install -g webpack 然后进行安装，安装成功后你的node-v10.15.3-win-x64目录下的node_global会多出 vue vue.cmd vue-init vue-init.cmd vue-list vue-list.cmd的文件 安装完成之后打开命令窗口并输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。 然后再输入vue init webpack spa1 spa1即为项目名，项目名不能用中文或大写字母，然后终端会出现“一问一答”模式 1.Project name：项目名，默认是输入时的那个名称spa1，直接回车 2.Project description：项目描述，直接回车 3.Author：作者，随便填或直接回车 4.Vue build：选择题，一般选第一个 4.1Runtime + Compiler: recommended for most users//运行加编译，官方推荐，就选它了 4.2Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue

1. 什么是 vue-cli? vue-cli 是 vue.js 的脚手架，用于自动生成 vue.js+webpack 的项目模板，创建命令如下： vue init webpack xxx 注 1 ： xxx 为自己创建项目的名称 注 2 ：必须先安装 vue,vue-cli ， webpack ， node 等一些必要的环境 2. 安装 vue-cli npm install -g vue-cli 注 1 ：安装成功后，会出现如下文件 D:\initPath node-v10.15.3-win-x64 node_global vue vue.cmd vue-init vue-init.cmd vue-list vue-list.cmd 注 2 ：安装完成之后打开命令窗口并输入 vue -V （注意这里是大写的 “V” ），如果出现相应的版本号，则说明安装成功。 3. 使用脚手架 vue-cli(2.X 版 ) 来构建项目 ## 步骤一：使用脚手架创建项目骨架 ## 此步骤可理解成：使用 eclipse 创建一个 maven 的 web 项目 cmd # 打开命令窗口 F: # 切换到 F 盘 cd d:\temp # 进入F:\y2\H-builderX\vue 目录 vue init webpack spa1 # 此命令用于创建 SPA 项目，它会在当前目录生成一个以