本文详细介绍了Vue.js项目的搭建流程，包括环境配置、组件数据绑定、路由管理及组件间通信技巧。涵盖Vue资源请求、事件触发、生命周期管理、Vuex状态管理和UI框架集成，适合初学者和开发者参考。
项目搭建
（前提已经安装了nodejs）
方式 1
npm install vue #只需安装一次
vue init webpack eglpt-vue
cd eglpt-vue
cnpm install / npm install 如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd到项目里面运行 cnpm install / npm install
npm run dev
方式 2（推荐）
npm install vue #只需安装一次
vue init webpack-simple eglpt-vue
cd eglpt-vue
cnpm install / npm install # 安装依赖
npm run dev #运行
开发项目推荐使用工具： JetBrains WebStorm / Visual Studio Code
数据绑定
绑定数据(2种写法)：v-bind: or :
绑定样式： 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()”
组建引入
路由配置
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为
（就是对所有的页面和跳转统一管理，web应用页面是灵魂，这个很重要）
1.安装npm install vue-router --save / cnpm install vue-router --save
2.引入 Vue.use(VueRouter) (main.js) 【实际的项目中，路由会很多，建议抽到一个js文件中，之后在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获取动态路由的值
get传值
1、 :to="'/productContent?id='+key"
2 、this.$route.query
生命周期函数/生命周期钩子
组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法 这些方法就叫做生命周期函数
请求数据（3种方式）
- 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
其余的2种方法一样
组件传值
父-》子组件传值
1.父组件调用子组件的时候 绑定动态属性 (可以传数据，也可以传方法，也可以是整个对象)
<v-lief :appTitle="appTitle" :appRun="appRun" :app="this"></v-lief>
2、在子组件里面通过 props接收父组件传过来的数据 String； Number； Boolean； Array； Object； Date； Function； Symbol
/*无验证*/
props: ['appTitle','appRun','app']
,
/*有验证,一般不用*/
/*props:{
'appTitle':String,
'appRun':Function,
'app':Object
},*/
父组件主动获取子组件的数据和方法：
1.调用子组件的时候定义一个ref
<v-life ref="life"></v-life>
2.在父组件里面通过
this.$refs.header.属性
this.$refs.header.方法
子组件主动获取父组件的数据和方法：
this.$parent.数据
this.$parent.方法
非父子组件传值
1、新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例
2、在要广播的地方引入刚才定义的实例
3、通过 VueEmit.$emit('名称','数据')
4、在接收收数据的地方通过 $om接收广播的数据
VueEmit.$on('名称',function(){
})
重定向、别名
“重定向”的意思是，当用户访问 /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’ }
HTML5 History 模式
如果不想要很丑的 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;
}
vuex
https://vuex.vuejs.org/zh/ (适用于大项目，小项目建议使用 localStorage 和 SessonStorage)
Vuex 是一个专为 Vue.js 设计的状态管理模式 ,
vuex解决了组件之间同一状态的共享问题 （解决了不同组件之间的数据共享） ,
组件里面数据的持久化
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');
设置浏览器icon图标
Vue UI框架 ->Element Ui
Element Ui 基于vue pc端的UI框架 【结合electron开发pc应用】
参考资料： http://element.eleme.io/
https://element.eleme.cn/#/zh-CN/component/installation
- 安装 cnpm i element-ui -S -S表示 --save
- main.js引入element UI的css 和 插件
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI);
3.webpack.config.js 配置file_loader
{
test: /.(eot|svg|ttf|woff|woff2)(?\S)?$/,
loader: ‘file-loader’
}
Vue UI框架 ->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://gitee.com/wenwang2000/eglpt-vue.git
问题
1.TypeError: this.getResolve is not a function
npm uninstall sass-loader（卸载当前版本）
npm install sass-loader@7.3.1 --save-dev
参考资料
https://cn.vuejs.org
https://github.com/pagekit/vue-resource
https://github.com/axios/axios
https://github.com/camsong/fetch-jsonp
https://router.vuejs.org/zh/
http://element.eleme.io/
https://element.eleme.cn/#/zh-CN/component/
http://element.eleme.io/1.4/#/zh-CN/component/quickstart
http://mint-ui.github.io/#!/zh-cn http://mint-ui.github.io/docs/#/zh-cn2
https://vuex.vuejs.org/zh/
扫一扫
1269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
