一、 VUE简介
Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js;同时比起 React + Redux 相对复杂的架构,Vue.js 更加轻量级也更加容易上手,是初创项目的首选前端框架。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。并且作者是华人的关系,Vue拥有着对华人开发者最友好的api文档和官方教程。
二、 技术选型
Element-ui:使用UI框架中部分UI组件进行快速开发
Sass:编写CSS语句
ES6:编写JS语句
Vue:进行数据绑定以及开发组件
Vue-router:处理页面路由
Vuex:处理各组件间的通讯
Vue-resource:处理HTTP请求
Webpack:项目管理及打包上传
三、 项目创建
1.电脑下载安装node, 检测node版本,需要在V4以上($node-v);//(npm install -g cnpm –registry=https://registry.npm.taobao.org安装淘宝镜像);
2.全局安装vue (
npminstall–gvue);3.安装脚手架(
n
p
m
i
n
s
t
a
l
l
–
g
v
u
e
)
;
3.
安
装
脚
手
架
(
npm install –g vue-cli);
4.运行vue命令,看是否已经安装完毕(
vue/
v
u
e
/
vue list查看可安装的魔板);
5.初始化项目(
vueinitwebpack(模板)cicApp(项目名称));6、进入目录,安装模块下代码的依赖(
v
u
e
i
n
i
t
w
e
b
p
a
c
k
(
模
板
)
c
i
c
A
p
p
(
项
目
名
称
)
)
;
6
、
进
入
目
录
,
安
装
模
块
下
代
码
的
依
赖
(
npm install);
7、启动项目(
npmrundev);8、打包项目(
n
p
m
r
u
n
d
e
v
)
;
8
、
打
包
项
目
(
npm run build);
四、 目录结构
|--index.html 入口页面
|--build 建脚本目录
| |--build.js 生产环境构建(编译打包)脚本
| |--check-version.js 版本验证工具
| |--utils.js 主要用来处理css类文件的loader
| |--vue-loader.conf.js 处vue中的样式
| |--webpack.base.conf.js webpack基础配置
| |--webpack.dev.conf.js webpack开发环境配置
| |--webpack.prod.conf.js webpack生产环境配置
|--config 项目配置
| |--dev.env.js 开发环境变量
| |--index.js 项目配置文件
| |--prod.env.js 生产环境变量
| |--test.env.js 测试环境变量
|--dist 打包好的项目
| |--html 静态文件
| |--conf nginx配置文件
| |--其他 nginx需要文件
|--node_modules 项目依赖模块
|--src 项目源码目录
| |--main.js 入口js文件,项目的核心文件
| |--app.vue 根组件
| |--components 公共组件目录
| |--assets 资源目录,资源会被webpack构建
| | |--css 第三方css文件,全局css文件
| | |--font 字体
| | |--Sass 全局Sass
| | |--images 图片
| | | |--logo.png
| |--routes 前端路由
| | |--index.js
| |--pages 前端页面文件
| | |--index.vue
| |--vuex 应用级数据(state)
| | |--store.js 分组数据存储
| |--service 公共服务文件
| | |--service.js 处理公共请求,响应数据
| | |--util.js 处理公共js操作方法
|--static 纯静态资源,不会被webpack构建
五、 安装项目需要的依赖
1、安装vue-router路由
$npm install vue-router –D
2、安装sass-loader以及node-sass插件
npm install sass-loader –D
npm install node-sass -D
3.安装轮播插件
npm install -S vue-carousel
4.引入vuex用于存储状态
npm install vuex –save-dev
5.安装Echarts图表
npm install echarts -S
六、其他注意事项
1.vue项目关闭eslint校验
两种解决方法
(1)在创建一个vue项目的时候,会有一个选择:Use ESLint to lint your code? (Y/n),在这一步,选择no就好了;
(2)修改build\webpack.base.conf.js
将标红这一块的格式校验内容去掉就好了。
2.sass语法不使用大括号和分号,否则会报CSS无效的错误
如果你喜欢使用不带大括号的语法,只要去掉css代码的大括号和分号,即使用缩进语法。
如果你希望使用带大括号的语法,即SCSS
那么,你只要把lang=”sass”改成lang=”scss”就行了。
3.注册组件,自定义标签名需要全部小写,否则会报下面的错误
4.控制v-for循环次数的方法
两种方法
(1)截取循环的数据
v-for=”(item,index) in domainList.slice(0, 2)”
(2)通过v-if来控制
v-for=”(item,index) in domainList” v-if=”index<3”
5.v-for中出现key值警告,添加:key=”index”
6.组件内引入外部css
@import "../assets/css/style.scss";
7.css只用于本组件内部
<style lang="scss" scoped>
8.vue :src 文件路径错误
根据webpack的特性,总的来说就是static放不会变动的,第三档的文件,asserts放可能会变动的文件;
如果图片放在asserts目录下,需要将图片作为模块加载进去,比如images:[{src:require(‘./1.png’)},{src:require(‘./2.png’)}]
如果图片放在static目录下,必须写成绝对路径如images:[{src:”/static/1.png”},{src:”/static/2.png”}]
9.函数中触发路由跳转
this.$router.push(/path);
10.vue2.0中不再有自带的过滤器,需要自己定义过滤器
11.methods中的一个方法调用methods中的另外一个方法,使用
this.$options.methods.test2();
12.父组件调用子组件的方法ref
<template>
<div>
<header>{{msg}}</header>
<select v-model="selected" @change="sieve(selected)">
<option v-for="item in condition" v-bind:value="item.name">{{item.name}}</option>
</select>
<sellerlist ref="abc"></sellerlist>//子组件中声名ref
</div>
</template>
<script>
import sellerlist from '../components/sellerlist.vue'
export default{
data(){
return {
msg:'',
condition:[
{name:'距离最近'},{name:'起送价最低'}
],
selected:''
}
},
components:{
sellerlist
},
methods:{
getParams(){
console.log(this.$router)
this.msg = this.$router.history.current.query.name;
},
sieve(selected){
console.log(selected)
if(selected == '距离最近'){
this.$refs.abc.isAsc('distance',true)//父组件中调用
}
if(selected == '起送价最低'){
this.$refs.abc.isAsc('fee',true)
}
}
},
created() {//在模板编译进路由前调用created方法,触发接收函数
var self = this;
self.getParams();
}
}
</script>
<style lang="scss" scoped>
select{
padding-top:2em;
background:red;
}
</style>
13.require和import都可以引入依赖,不同的是require可以直接直接从 node_modules 中查找,而import必须把路径写全