video 4

手动配置自己:
webpack+vue-loader

webpack加载模块
-------------------------------------
如何运行此项目?
1. npm install 或者 cnpm install
2. npm run dev
-> package.json
"scripts":{
"dev":"webpack-dev-server --inline --hot --port 8082"
}

以后下载模块:
npm install <package-name> --save-dev

EADDRINUSE 端口被占用

少了:
webpack-dev-server
webpack
----------------------------------------
.vue 结尾,之后称呼组件
----------------------------------------
路由:
vue-router

-> 如何查看版本:
bower info vue-router

路由使用版本: 0.7.13
配合vue-loader使用:
1. 下载vue-router模块
cnpm install vue-router@0.7.13
2. import VueRouter from 'vue-router'

3. Vue.use(VueRouter);

4. 配置路由
var router=new VueRouter();
router.map({
路由规则
})
5. 开启
router.start(App,'#app');

注意:
之前: index.html -> <app></app>
现在: index.html -> <div id="app"></div>

App.vue -> 需要一个 <div id="app"></div> 根元素

home news
---------------------------------------------
路由嵌套:
和之前一模一样
--------------------------------------------
上线:
npm run build
-> webpack -p
--------------------------------------------
脚手架:
vue-cli——vue脚手架
帮你提供好基本项目结构

本身集成很多项目模板:
simple 个人觉得一点用都没有
webpack 可以使用(大型项目)
Eslint 检查代码规范,
单元测试
webpack-simple 个人推荐使用, 没有代码检查 √

browserify -> 自己看
browserify-simple

--------------------------------------------
基本使用流程:
1. npm install vue-cli -g 安装 vue命令环境
验证安装ok?
vue --version
2. 生成项目模板
vue init <模板名> 本地文件夹名称
3. 进入到生成目录里面
cd xxx
npm install
4. npm run dev
--------------------------------------------

vue视频学习笔记04的更多相关文章

  1. vue视频学习笔记07

    video 7 vue问题:论坛http://bbs.zhinengshe.com------------------------------------------------UI组件别人提供好一堆 ...

  2. vue视频学习笔记06

    video 6 vue动画vue路由--------------------------------------transition 之前 属性<p transition="fade& ...

  3. vue视频学习笔记05

    video 5 vue2.0:bower info vue http://vuejs.org/到了2.0以后,有哪些变化? 1. 在每个组件模板,不在支持片段代码组件中模板:之前:<templa ...

  4. vue视频学习笔记03

    video 3 git page:任何仓库 master分支,都可以发布(git page)-------------------------------------双向过滤器:Vue.filter( ...

  5. vue视频学习笔记02

    video 2 vue制作weibo交互 vue-> 1.0vue-resource ajax php服务器环境(node) this.$http.get()/post()/jsonp() th ...

  6. vue视频学习笔记01

    video 1 vue:读音: v-u-eview vue到底是什么?一个mvvm框架(库).和angular类似比较容易上手.小巧mvc:mvpmvvmmv*mvx官网:http://cn.vuej ...

  7. vue视频学习笔记

    video 7 vue问题: 论坛 http://bbs.zhinengshe.com------------------------------------------------UI组件 别人提供 ...

  8. SaToken学习笔记-04

    SaToken学习笔记-04 如果有问题,请点击:传送门 角色认证 在sa-token中,角色和权限可以独立验证 // 当前账号是否含有指定角色标识, 返回true或false StpUtil.has ...

  9. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

随机推荐

  1. UICollectionView 适配 iPhone 7 Plus

    UICollectionView 适配 iPhone 7 Plus 需求:在屏幕上水平放置 5 张正方形图片,每张图片的宽度相等,无缝隙排列铺满一个屏幕宽度. 看似很简单的需求.用 UICollect ...

  2. 关于js参数传递矛盾新理解

    之前看了很多人的解释,说js中,函数的参数传递都是值传递中不理解. 他们无非举了两个例子 在这两个例子中,第二个例子可以看出参数是由值传递的.因为函数内对象的变化没有影响到函数外对象的变化.但是在第一 ...

  3. unity插件开发——Selection

    Selection是一个静态类,它的主要功能是获取在project窗口中鼠标选择的对象或者是inspector窗口的当前显示的对象.它的字段有 activeGameObject activeInsta ...

  4. python之pymysql模块学习(待完善...)

    pymysql介绍 pymysql是在python3.x版本中用于连接mysql服务器的一个库.python2中则使用mysqldb. 安装方法: pip install pymysql 使用实例: ...

  5. 重温Javascript(二)

    对象 可以想象成散列表,键值对,值可以是数据或函数 创建对象的方式 1.工厂模式 function createPerson(name, age, job){ var o = new Object() ...

  6. SystemClock官方简介

    public final class SystemClock extends Object java.lang.Object    ↳ android.os.SystemClock Class Ove ...

  7. C# 遍历泛型集合

    /// <summary> /// 遍历泛型 /// </summary> /// <typeparam name="T"></typep ...

  8. 图解函数重载以及arguments

  9. MySQL关于check约束无效的解决办法

    首先看下面这段MySQL的操作,我新建了一个含有a和b的表,其中a用check约束必须大于0,然而我插入了一条(-2,1,1)的数据,其中a=-2,也是成功插入的. 所以MySQL只是check,但是 ...

  10. Python中字符串拼接的三种方式

    在Python中,我们经常会遇到字符串的拼接问题,在这里我总结了三种字符串的拼接方式:     1.使用加号(+)号进行拼接 加号(+)号拼接是我第一次学习Python常用的方法,我们只需要把我们要加 ...