代码拉取完成，页面将自动刷新
方式 1
vue init webpack eglpt-vue
cd eglpt-vue
cnpm install / npm install 如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd到项目里面运行 cnpm install / npm install
npm run dev
方式 2（推荐）
vue init webpack-simple eglpt-vue
cd eglpt-vue
cnpm install / npm install
npm run dev
绑定数据：v-bind: || : 绑定样式： v-bind:class="{ active: isActive }" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" 绑定html: v-html="h" MVVM双项数据绑定 ：model改变会影响视图view，view视图改变反过来影响model 触发事件 ： v-on:click="getMsg()" @click="setMsg()"
组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法 这些方法就叫做生命周期函数
beforeCreate(){
console.log('实例刚刚被创建1');
},
created(){
console.log('实例已经创建完成2');
},
beforeMount(){
console.log('模板编译之前3');
},
mounted(){ /*请求数据，操作dom , 放在这个里面 mounted*/
console.log('模板编译完成4');
},
beforeUpdate(){
console.log('数据更新之前');
},
updated(){
console.log('数据更新完毕');
},
/*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/
beforeDestroy(){
console.log('实例销毁之前');
},
destroyed(){
console.log('实例销毁完成');
}
vue-resource 官方提供的 vue的一个插件 https://github.com/pagekit/vue-resource [推荐使用]
1、需要安装vue-resource模块， 注意加上 --save 插件写入package.json
npm install vue-resource --save / cnpm install vue-resource --save
2、main.js引入 vue-resource
import VueResource from 'vue-resource';
3、main.js Vue.use(VueResource);
4、在组件里面直接使用
this.$http.get(地址).then(function(){
})
axios 第三方插件 https://github.com/axios/axios
1、安装 cnpm install axios --save
2、哪里用哪里引入axios
fetch-jsonp https://github.com/camsong/fetch-jsonp
1.父组件调用子组件的时候 绑定动态属性 (可以传数据，也可以传方法，也可以是整个对象)
<v-header :title="title" :run="run" :home="this"></v-header>
2、在子组件里面通过 props接收父组件传过来的数据 String； Number； Boolean； Array； Object； Date； Function； Symbol
/*无验证*/
props:['title',"run","home"]
/*有验证*/
props:{
'title':String,
'run':Function,
'home':Object
}
1.调用子组件的时候定义一个ref
<v-header ref="header"></v-header>
2.在父组件里面通过
this.$refs.header.属性
this.$refs.header.方法
this.$parent.数据
this.$parent.方法
1、新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例
2、在要广播的地方引入刚才定义的实例
3、通过 VueEmit.$emit('名称','数据')
4、在接收收数据的地方通过 $om接收广播的数据
VueEmit.$on('名称',function(){
})
参考资料：https://router.vuejs.org/zh/
1.安装npm install vue-router --save / cnpm install vue-router --save
2.引入 Vue.use(VueRouter) (main.js)
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3.配置路由
1、创建组建 引入组建
2、定义路由（建议复制js）
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '*', redirect: '/home' } /*??????·??*/
]
3、实例化VueRouter
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
4、挂载
new Vue({
el: '#app',
router，
render: h => h(App)
})
5 <router-view></router-view> 放在 App.vue
1、配置动态路由
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
2、在对应的页面
this.$route.params获取动态路由的值
1、 :to="'/productContent?id='+key"
2、this.$route.query
“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么“别名”又是什么呢？
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
重定向的目标也可以是一个命名的路由：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。
{ path: '/a', component: A, alias: '/b' }
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
const router = new VueRouter({
mode: 'history',
routes: [...]
})
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
nginx
location / {
try_files $uri $uri/ /index.html;
}
1.配置路由
{
path: '/user',
component: User,
children:[
{ path: 'useradd', component: UserAdd },
{ path: 'userlist', component: Userlist }
]
}
2.父路由里面配置子路由显示的地方 <router-view></router-view>
Element Ui 基于vue pc端的UI框架 http://element.eleme.io/ https://element.eleme.cn/#/zh-CN/component/installation
1.找官网
2.安装 cnpm i element-ui -S -S表示 --save
3.引入element UI的css 和 插件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
4、*webpack.config.js 配置file_loader http://element.eleme.io/1.4/#/zh-CN/component/quickstart
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}
5.看文档直接使用。
element UI组件的单独使用（第一种方法）：
1、cnpm install babel-plugin-component -D
2、找到.babelrc 配置文件
把
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
改为 注意：
{
"presets": [["env", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
3、
import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)
element UI组件的单独使用（第二种方法）：
import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)
引入对应的css
import 'element-ui/lib/theme-chalk/index.css';
如果报错： webpack.config.js 配置file_loader
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}
MintUi 基于vue 移动端的ui框架 http://mint-ui.github.io/#!/zh-cn http://mint-ui.github.io/docs/#/zh-cn2
1.找官网
2.安装 npm install mint-ui -S -S表示 --save
3.引入mint Ui的css 和 插件
import Mint from 'mint-ui';
Vue.use(Mint);
import 'mint-ui/lib/style.css'
4.看文档/样例 直接使用。 创建项目的时候要选择 scss
在mintUi组件上面执行事件的写法 @click.native
https://vuex.vuejs.org/zh/ (适用于大项目，小项目建议使用 localStorage 和 SessonStorage)
Vuex 是一个专为 Vue.js 设计的状态管理模式 ,
vuex解决了组件之间同一状态的共享问题 （解决了不同组件之间的数据共享） ,
组件里面数据的持久化
1、src目录下面新建一个vuex的文件夹
2、vuex 文件夹里面新建一个store.js
3、安装vuex
cnpm install vuex --save
4、在刚才创建的store.js引入vue 引入vuex 并且use vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
5、定义数据
/*1.state在vuex中用于存储数据*/
var state={
count:1
}
6、定义方法 mutations里面放的是方法，方法主要用于改变state里面的数据
var mutations={
incCount(){
++state.count;
}
}
暴露
const store = new Vuex.Store({
state,
mutations
})
export default store;
组建里面使用vuex：
1.引入 store
mport store from '../vuex/store.js';
2、注册
export default{
data(){
return {
msg:'我是一个home组件',
value1: null,
}
},
store,
methods:{
incCount(){
this.$store.commit('incCount'); /*触发 state里面的数据*/
}
}
}
3、获取state里面的数据
this.$store.state.数据
4、触发 mutations 改变 state里面的数据
this.$store.commit('incCount');
npm uninstall sass-loader（卸载当前版本）
npm install sass-loader@7.3.1 --save-dev
 |
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手