vue学习笔记1

安装nodejs

安装vue

安装vue-命令行工具

开发工具：atom，idea

axios-mock-adapter模拟调试器 -->解决前端数据问题

vue工作过程？

• main.js入口

• vue包含模板、脚本、样式

• el、data(数据源)、computed(计算属性)，methods(函数方法)，mounted（加载完成事件）

• 菜单是通过vue指令从路由列表里读取显示

vuex工作过程？

• main.js入口

• 挂载APP组件（组件挂载组件）

• APP组件挂载头部、菜单、内容容器组件

• vuex包含state、actions、mutations(需要手动commit更新数据变化)

vue-router

• this.$router.push({ path: '/main' });完成跳转

• routes集合

vue & vuex 配合？

• vue调用vuex-action

• this.$store.dispatch(types.APP_CACHE_DICT)，触发vuex-action动作

• 通过...mapActions(['count'])或者...mapActions({'count': 'count'})，触发vuex-action

• vue获取vuex-state

• 通过...mapState(['count'])或者...mapState({'count': 'count'})，将vuex-state数据混入vue计算属性

• 通过函数直接访问this.$store.state.count;vuex-state数据

element-ui的使用

实例：

表格列表

分页栏

字典表

弹框

数据校验

项目调试

• main.js入口

• 加载APP

• APP挂载头、左侧菜单、内容容器组件，同时做初始化 --（组件包含样式、模板、脚本）

• 左侧菜单挂载路由，并加载各个响应业务组件

• 业务组件按照store请求规则，请求store组件（state、actions、mutations）

样例调试

• main.js入口，初始化vue，导入vue-remote路由，vuex状态管理

• 未登录

• 跳转登录vue组件，包含模板，脚本，样式

• 脚本包含data（vue-axios请求组件获取），methods，mounted，computed

• 已登录

• 请求对应vue组件，包含模板、脚本、样式

• 脚本包含data（vue-axios请求组件获取），methods，mounted，computed

组件只能有一个根元素,就是你这了第一个<template></template>下面必须只有一个根元素,可以使用一个容器元素包裹住,例如:

<template>
   <p>
       <template v-for="branch in branches">
           <label :for="branch">{{ branch }}</label>
           <input type="radio" :name="branch" :value="branch" v-model="currentBranch">
       </template>
   </p>
</template>

安装淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

---

安装项目依赖

npm install

---

安装 vue 路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

---

启动项目

npm run dev

---

在src/assets下面新建css、js、less、fonts文件夹，并放入对应文件。

将bootstrap.css放入css下，bootstrap.min.js放入js文件下，fonts字体放入fonts下.

---

安装js依赖

cnpm install jquery --save-dev

---

安装css依赖

cnpm install style-loader --save-dev

cnpm install css-loader --save-dev

cnpm install file-loader --save-dev

---

安装less依赖

npm install less less-loader --save

---

构建

npm run build

---

修改webpack.base.conf.js文件，让其支持外部的css和js

module.exports = {  entry: {    app:'./src/main.js'},

后面加

plugins: [

new webpack.ProvidePlugin({

$: "jquery",

jQuery: "jquery",

"windows.jQuery": "jquery"

})

],

把alias:{'vue$':'vue/dist/vue.common.js','src':path.resolve(_dirname,'../src'),'assets':path.resolve(_dirname,'../src/assets'),'components':path.resolve(_dirname,'../src/components')}

改成

alias: {

'vue$': 'vue/dist/vue.common.js',

'src': path.resolve(_dirname, '../src'),

'assets': path.resolve(_dirname, '../src/assets'),

'components': path.resolve(_dirname, '../src/components'),

jquery: "jquery/src/jquery"

}

---

修改webpack.base.conf.js文件，配置loader加载依赖，让其支持外部的css和js,less

{

test: /.js$/,

loader: 'babel-loader',

exclude: /node_modules/

},

{

test: /.css$/,

loader: "style-loader!css-loader",

},

{

test: /.less$/,

loader: "style-loader!css-loader!less-loader",

},

---

修改webpack.base.conf.js文件，配置字体loader加载依赖，让其支持字体图标

{test: /.svg(?v=d+.d+.d+)?$/, loader: 'file-loader?mimetype=image/svg+xml'},

{test: /.woff(?v=d+.d+.d+)?$/, loader: "file-loader?mimetype=application/font-woff"},

{test: /.woff2(?v=d+.d+.d+)?$/, loader: "file-loader?mimetype=application/font-woff"},

{test: /.ttf(?v=d+.d+.d+)?$/, loader: "file-loader?mimetype=application/octet-stream"},

{test: /.eot(?v=d+.d+.d+)?$/, loader: "file-loader"}

---

接着修改 src文件夹下面的main.js文件，打开文件之后在顶部加入

import'./assets/css/bootstrap.css'

import'./assets/js/bootstrap.min.js'

import'./assets/less/less.less'

打赏支持