使用 Vue 脚手架工具进行组件化开发

使用 Vue 脚手架工具进行组件化开发 QQ群:595928952 上一节 下一节

Vue js 2.0 教程 >> 使用 Vue 脚手架工具进行组件化开发 视频发布于 2016-11-14

Vuejs 脚手架工具是 Vuejs 官方提供的一个命令行操作工具,我们可以非常便利地初始化一个 Vuejs 项目来进行开发。本节视频在前面视频的基础上,结合 Vuejs 的脚手架工具,尝试重新认识组件化开发。
canihelpyou

要讲怎么和laravel结合使用吗?

JellyBool 回复 @canihelpyou

要的,下一个先讲最基础的,然后再讲 laravel 项目的使用

canihelpyou 回复 @JellyBool

今天要更新吗?

JellyBool 回复 @canihelpyou

我正在导出视频,12点之前肯定更新一个。。。。

chenxin

厉害!不过我还是有点问题,add多个几行点击completed按钮就不会出现你的这种效果了,还得看看哪里有错啊!好奇怪啊!

a119347 回复 @chenxin

是不是newTodo没给completed赋值

sunnirvana 回复 @a119347

哈哈,我也遇到这个问题,这位同学一下就给出方法。谢谢。

假如_丶 回复 @sunnirvana

修改的哪里?

JellyBool 回复 @假如_丶

这个 newTodo 的 初始值 completed

假如_丶 回复 @JellyBool

可以诚实的说一句没懂吗 - -

JellyBool 回复 @假如_丶

大概这样:

newTodo : {id:0,title:'',completed:false}

注意你的 newTodo 用到的地方,注意设置初始值就好了吧

shadow610

新建时候有vue文件,这个是怎么做的呢?现在装了插件,识别vue的文件,但新建那个是怎么做的?

JellyBool 回复 @shadow610

没记错的话,我是装了这个插件就好了。如果你的没有成功,试试设置 file template 或者 live template

codedone

jb大神,请收下我的膝盖

JellyBool 回复 @codedone

还是叫我 jelly 吧,哇哈哈哈。。暂时还不是大神咯

codedone 回复 @JellyBool

好的,jelly大神

z531020509

老师,这个webpack --watch该怎么引用进去

JellyBool 回复 @z531020509

你是说在这个项目使用 webpack --watch? 你直接执行 npm run dev 就默认是 --watch 了

z531020509 回复 @JellyBool

但是老师,我代码更新之后没有实现刷新...每次都需要重新run才行...

z531020509 回复 @JellyBool

老师,这是不是因为phpstorm自动保存导致的....

JellyBool 回复 @z531020509

不是吧,我也是 phpstorm 自动保存的啊。你是什么环境?

z531020509 回复 @JellyBool

已经没有问题啦,把那个use safe write关掉好了,谢谢老师

JellyBool 回复 @z531020509

OK,最近在外边。。。回复没那么及时

z531020509 回复 @JellyBool

老师已经很负责了,真的感谢,学到了好多好多的

JellyBool 回复 @z531020509

感谢支持和理解。哈哈哈

小Jia亮 回复 @z531020509

请问是如何操作关闭的?我也遇到这个问题了

z531020509 回复 @小Jia亮

setting里面有一个叫Appearance & Behavior下面的System setting,点击进去,最下面一个关闭就行了

hard88

jelly可以讲一下webpack+vue-cli多页面开发吗?

JellyBool 回复 @hard88

多页面是什么?

hard88 回复 @JellyBool

module里面多个模块,每个模块里面有个对应的html和js和vue文件

hard88 回复 @JellyBool

想了想好像没什么必要分模块

hard88 回复 @Yawenina

好的谢谢!!

chenze007

我想引入一个静态文件 不管放到那个文件夹下引入 都提示 404
假如引入成功的话 打包的时候 时候会不会有影响

咖啡加糖_36221

短小精悍,非常nice,老师会录制 angular2.0 的视频么?

JellyBool 回复 @咖啡加糖_36221

不会不会,对 angular 完全不会

xcheese

hello,想问个题外话,这节里看到你的terminal的配置很不错,想打听下是怎么配置的?用的什么插件吗?

chenxin

这个index.html页面中的 <div id="app"></div>
如果外面在加基层div那么就不会出现页面了.....很奇怪 。

JellyBool 回复 @chenxin

你试着给外层 div 设置一个高度试试。

chenxin 回复 @JellyBool

没用

<div class="container" >
    <div class="row">
        <div v-cloak class="col-md-8 col-md-offset-2" style="height: 600px">
            <div id="app"></div>
        </div>
    </div>
</div>
chenxin 回复 @JellyBool

而且我打开浏览器检查,发现里面有内容,居然不显示,这是什么鬼 !

chenxin 回复 @JellyBool

我知道了,去掉v-cloak就可以了,这个之前加上去避免出现闪烁!

chenxin

这个脚手架生成的模板好像只适合开发SPA吧!

妖靥的单纯

老师,为什么我生成的文件里执行了npm install命令后就生成了node_modules这个文件夹,我看了你生成后就没有,我这个要怎么配置呢?

JellyBool 回复 @妖靥的单纯

有这个是正常的,我的是因为 ide 的设置把 node_modules 目录隐藏啦

妖靥的单纯 回复 @JellyBool

哇,原来是这样,谢谢,谢谢!

妖靥的单纯

老师,我问的问题可能比较低级,但是我还是想问问,用了vue-cli脚手架开发的话,就不用下载loaders了吗?另外在这个脚手架开发中没有config.js,那在这里边哪个文件相当于config.js的功能。

JellyBool 回复 @妖靥的单纯

你看看这个,其实是有 vue-cli 下载的文件就是这个项目的

https://github.com/vuejs-templates/webpack/tree/master/template/build

LiZheGuang

可以 多讲点 有关于 vue vue-cli 还有一些vue开源框架的使用课程吗?

JellyBool 回复 @LiZheGuang

这个再看吧,非专业前端。我先 录完 TDD 先

DanceSmile

main.js 里面的template 是做什么的
我目前的理解template 应该是组件的模板啊 
这个main.js也不是组件啊 
不怎么理解 

JellyBool 回复 @DanceSmile

就是普通的 js 文件啊,template 就是 js 的字符串,这样理解就OK

lovefisher

如果不采用link方式加入bootsrap的css
怎么通过npm引入bootsrap呢?

JellyBool 回复 @lovefisher

http://getbootstrap.com/getting-started/

安装部分:
npm install bootstrap@3

lovefisher 回复 @JellyBool

嗯 这个知道
我把bootsrap跟jquery都装上了
import后bootsrap报错jQuery undefined

感觉像是webpack那边的配置问题么?
需要一个alias吗?
谢谢Jelly

JellyBool 回复 @lovefisher

基本上就是顺序问题吧

z375742134 回复 @JellyBool

其他可以的,就视频二三不可以,这么奇怪

jihaichuan

在根目录里面有一个index.html 文件, 它里面任何的JS都没有引入, 不知道它是怎么加载出 app.js 的

PIC021

import语法是es6自带吗?还是nodejs自带的?因为比如视频的第14:56处,第一行和第2行:
import Vue from 'vue'
import Vue from './App'
这2行代码,为何不是
import Vue from 'vue.vue‘’
import Vue from './App.vue'
也就是为什么不加后缀,系统也可以正常识别?

1993n

请问一下,这个php IDE是用的什么主题?

素予时-初见冰雪颜

想问一个问题,我安装依赖包,有一个文件夹,叫node_modules,大概有四五十兆,我删了这个文件夹就无法运行项目了,可是不删的话这内存也太大了点。我看jelly老师的项目文件里好像没有这个文件夹啊。

JellyBool 回复 @素予时-初见冰雪颜

都是有的,这个 node_modules 就是依赖,只不过 phpstorm 我当时设置隐藏那个文件夹了

素予时-初见冰雪颜 回复 @JellyBool

原来是这样,但是这么大的一个文件夹,真正做项目的时候怎么办?

a359611223

安装vue-2.0-cli的时候 现在多了一条 Install vue-router?

a359611223

vue-cli生成页面是需要通过编译吗
直接打开目录文件页面是空的

JellyBool 微信公众号

不定期送书,送键盘,送订阅优惠