使用 Vue 脚手架工具进行组件化开发
打赏作者

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

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 用到的地方,注意设置初始值就好了吧

ideasource 回复 JellyBool

是这样定义的没错,但确实会存在卡住页面,点点其他的有时候就会恢复

shadow610

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

JellyBool 回复 shadow610

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

xiaofengzhi 回复 JellyBool

老大你用的是哪个版本的phpstorm为啥最新版本的安装了vue插件并不能识别vue文件啊

JellyBool 回复 xiaofengzhi

我用最新版的。最新版默认就识别 vue 文件了吧

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

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

Yawenina 回复 hard88

可以用webpack的HtmlWebpackPlugin插件实现https://github.com/ampedandwired/html-webpack-plugin#generating-multiple-html-files

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生成页面是需要通过编译吗
直接打开目录文件页面是空的

dppppp

老师 这个vue的插件叫什么啊 如何安装呢

JellyBool 回复 dppppp

你说的是 phpstorm 的 vuejs 插件么?你直接到 plugins 里面去搜啊

dppppp

image.png

image.png

老师 可是我下载好了 没有您的那个效果呢

JellyBool 回复 dppppp

啊哈,我想起来了,在新版的 phpstorm 中,貌似那个插件下架了。

dppppp 回复 JellyBool

? 那有什么替代的嘛?

JellyBool 回复 dppppp

没有了,而且现在最新的 phpstorm 不是已经支持 Vuejs 了么

wwhu668 回复 dppppp

可以自定义一个
Edit File Templates…
将需要首次生产的代码放里面就好了

bit世界风

请教下 我vue cli 版本2.8.0 vue init 构建项目是vue 2.3。你的视频是2.0的vue版本。我改怎么构建项目?

JellyBool 回复 bit世界风

我改怎么构建项目?

这个大版本一样应该没有太大的影响,你需要到 github 看版本发布的 change log

dope2008

sublime text有插件可以快速生成vue的文件吗?

JellyBool 回复 dope2008

这个我不是很清楚,你可以搜一下

zhangwei

toggleComplete(todo){ todo.completed=!todo.completed; }真奇怪 我用这个切换组件completed时到第三个就不好使了 前两个都正常

JellyBool 回复 zhangwei

console 有什么报错么?

zhangwei

没有任何报错 这也是特诡异的部分

JellyBool 回复 zhangwei

好吧。。这个感觉我也无能为力。

这两天我在录 SPA 的视频。

zhangwei 回复 JellyBool

哈哈哈 这个好 辛苦教主了!!!

iopkq999

老师的iterm2是什么主题 还是oh my zsh的哪个主题?

JellyBool 回复 iopkq999

oh-my-zsh 的 cloud 主题的吧

supperTony

computed里面todoCount怎么传进template里面,现在只能放在外面,如果放进template里面就会报错undefind todoCount

JellyBool 回复 supperTony

怎么传进template里面,现在只能放在外面

这是什么?

charlie

老师,我效果已经出来了,但是input的placeholder内容不显示,而且也没有报错,是什么原因呢?

JellyBool 回复 charlie

这样我是看不出来什么错的。。。

YVEND

[Vue warn]: Error in mounted hook: “TypeError: this.domNode.setAttribute is not a function”

found in

—>

at resources/assets/js/components/header.vue

warn @ app.js:1086
handleError @ app.js:1169
callHook @ app.js:3313
insert @ app.js:4198
invokeInsertHook @ app.js:6151
patch @ app.js:6354
Vue._update @ app.js:3060
updateComponent @ app.js:3184
get @ app.js:3527
Watcher @ app.js:3516
mountComponent @ app.js:3188
Vue3.3.mount @ app.js:8591
Vue3.3.mount @ app.js:10781
Vue._init @ app.js:4913
Vue$3 @ app.js:4998
(anonymous) @ app.js:16530
webpack_require @ app.js:20
Object.defineProperty.value @ app.js:16493
webpack_require @ app.js:20
Object.defineProperty.value @ app.js:63
(anonymous) @ app.js:66
13:21:19.238

老师,我用的 vue-router 建立的组件 ,npm run watch 后 每次都 this.domNode.setAttribute is not a function 我的npm的dependencies 是这样的"dependencies": {
“element-ui”: “^2.0.0-alpha.1”,
“vue-agile”: “^0.2.6”,
“vue-router”: “^2.7.0”,
“vue”: “^2.4.4”
}

JellyBool 回复 YVEND

我猜是某个属性定义或者单词写错了

YVEND 回复 JellyBool

这个是新的element-ui 的导航组件有问题。

laraer

JellyBool 你后续会出react跟angular嘛

liujun

用驼峰法表示标签名可以直接用了

liujun

main.js里面的

template: '<App/>'

这个是什么意思呢

pracitcemp

老师,你的这个vuejs-2.0-cli 的脚手架是在homestead虚拟机里安装的么?为什我的安装完成后打开的页面是空白页面?查看网页源代码能看到index.html这个文件的代码,但是没有main.js的效果。

JellyBool 回复 pracitcemp

我的是直接在 mac 下使用 vue-cli 的,只不过代码是同步到 homestead

pracitcemp 回复 JellyBool

老师有没有试过在homestead上安装vue-cli。
我在Homestead.yaml里面添加了端口转发8078转8078,
然后修改了vuejs项目config/index.js里面的端口为8078,
然后vagrant reload --provision,可以看到添加了我需要的端口转发,
然后登录homestead,在项目文件中执行 npm run dev ,也可以看到提示: Your application is running here http://localhost:8078
但是我打开浏览器提示我无法访问此网站。

JellyBool 回复 pracitcemp

http://192.168.10.10:8078

话说怎么这样配环境?

q646448149

这样的话,每次都在在App.vue 文件里面填充其他组件了,另外,组件数据进来后,怎么把 form 那样式还按照上个视频那样规整呢