|
|
步骤
1
:
vue-cli 概念
步骤
2
:
准备项目目录
步骤
3
:
安装 vue-cli
步骤
4
:
查看版本
步骤
5
:
原型工具
步骤
6
:
test.vue
步骤
7
:
运行命令
步骤
8
:
打开测试地址
步骤
9
:
关于 vue 文件
步骤
10
:
test.vue
步骤
11
:
重新运行
步骤
12
:
创建项目
步骤
13
:
运行项目
步骤
14
:
访问测试地址
步骤
15
:
vue-cli 缺点
什么是 vue-cli 呢？ vue-cli 是 vue 出来的一个脚手架，可以进行 组件式地开发。 但是要运用 vue-cli , 必须要有 node.js 和 webpack 的基础，否则里面很多命令既运行不了，也无法理解。 所以没有 node.js 和 webpack 基础的同学， 请先学习这两门课程： node.js 入门教程 webpack 入门教程
vue-cli 截止目前是出到3了。 接下来的教程都是以3为基础做的。 安装命令：
npm install -g @vue/cli@3.0.1
注意，这个版本号一定要跟，如果不跟，那么就是安装vue-cli 的最新版本。 目前 （2018-08-19） 其最新版本是 3.0.1。 但是如果过几个月，你才看到这个教程的话，说不定 vue-cli 的版本就是 4.0了。 而不同版本的做法区别很多，本教程是基于 3.0.1 做的，所以安装的时候一定要加上 3.0.1 ，否则错版本的教程就没有意义了。 如图所示就是安装好了。 其中了几个警告，是针对 mac 操作系统的，我们用的是 windows 可以不管它。
安装成功之后，可以通过如下命令查看版本
vue --version
当前版本是 3.0.1
vue-cli 提供了一个很方便的原型工具，按照如下方式安装
npm install -g @vue/cli-service-global@3.0.1
在项目下新建一个 test.vue 文件，然后用随便什么编辑器在里面输入如下内容。
");
window.frames["iframe_show8012"].document.write(decodeHtml($("textarea#stepcodeTextarea8012").val()));
window.frames["iframe_show8012"].document.close();
$(window.frames["iframe_show8012"]).load(function(){
$("#iframe_show8012").height($("#iframe_show8012").contents().find("body").height()+showittryitheight);
});
$("#iframe_show8012").height($("#iframe_show8012").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<template>
<h1>Hello Vue-Cli</h1>
</template>
<template>
<h1>Hello Vue-Cli</h1>
</template>
");
window.frames["iframe8012"].document.write(decodeHtml(code8012));
window.frames["iframe8012"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe8012"]).load(function(){
$("#iframe8012").height($("#iframe8012").contents().find("body").height()+showittryitheight);
});
$("#iframe8012").height($("#iframe8012").contents().find("body").height()+showittryitheight);
alreadyWriteCode8012 = code8012;
$("#rendering8012").hide();
$("#rendered8012").show();
}
var tRereshRetry2DemoPanel8012 = setInterval(rereshRetry2DemoPanel8012,1000);
var binded8012 = false;
$("textarea#stepcodeTextarea8012").keyup(function(){
if(!binded8012){
$(window).bind('beforeunload',function(){
binded8012 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code8012 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code8012!=newCode){
// window.frames["iframe8012"].document.write("
");
// window.frames["iframe8012"].document.write(decodeHtml($("textarea#stepcodeTextarea8012").val()));
// window.frames["iframe8012"].document.close();
// $(window.frames["iframe8012"]).load(function(){
// $("#iframe8012").height($("#iframe8012").contents().find("body").height()+showittryitheight);
// });
// code8012 = newCode;
// }
});
$(".tryButton8012").click(function(){
$("#tryDiv8012").show();
$("#stepcodeTextarea8012").focus();
$("#stepcodeTextarea8012").height(200);
$("#iframe8012").height(0);
window.frames["iframe8012"].document.write("
");
window.frames["iframe8012"].document.write(decodeHtml($("textarea#stepcodeTextarea8012").val()));
window.frames["iframe8012"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe8012"]).load(function(){
$("#iframe8012").height($("#iframe8012").contents().find("body").height()+showittryitheight);
});
$("#iframe8012").height($("#iframe8012").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor8012.focus();
editor8012.setSize(null, "250");
$("#rendering8012").hide();
$("#rendered8012").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor8012 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea8012"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor8012.on("change",function(doc){
if(!binded8012){
$(window).bind('beforeunload',function(){
binded8012 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code8012 = newCode;
$("textarea#stepcodeTextarea8012").val(newCode);
if(alreadyWriteCode8012!=code8012){
lastModifedTime8012 = new Date().getTime();
$("#rendering8012").show();
$("#rendered8012").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor8012 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor8012.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv8012").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
然后运行命令
vue serve test.vue
就会提示，让打开如下 URL 进行测试：
http://localhost:8081/
打开测试地址就会看到如图所示。。。 这就表示 vue 跑起来了~
http://localhost:8081/
回顾前面学习的组件知识： vue.js 组件， 虽然 vue 可以通过 组件的方式重复使用很多代码，但是 <component> 方式有一些缺陷： 1. 组件用 '' 方式写，如果比较复杂，写起来麻烦 2. 组件里 不包含 js 3. 组件里不包含 css 而用 vue 就可以化解这个问题。 下个步骤把 test.vue改造一下。
把 test.vue改造一下。
html部分放在 <template> 标签里
提供数据部分放在 <script> 里
央视部分放在 <style> 里
这就是一个可以有比较完整功能的组件了
");
window.frames["iframe_show8017"].document.write(decodeHtml($("textarea#stepcodeTextarea8017").val()));
window.frames["iframe_show8017"].document.close();
$(window.frames["iframe_show8017"]).load(function(){
$("#iframe_show8017").height($("#iframe_show8017").contents().find("body").height()+showittryitheight);
});
$("#iframe_show8017").height($("#iframe_show8017").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<template>
<p>{{greeting}} Vue-Cli</p>
</template>
<script>
export default {
data () {
return {
greeting: 'Hi'
}
}
}
</script>
<style scoped>
p{
font-size: 2em;
text-align:center;
color:blue;
}
</style>
<template>
<p>{{greeting}} Vue-Cli</p>
</template>
<script>
export default {
data () {
return {
greeting: 'Hi'
}
}
}
</script>
<style scoped>
p{
font-size: 2em;
text-align:center;
color:blue;
}
</style>
");
window.frames["iframe8017"].document.write(decodeHtml(code8017));
window.frames["iframe8017"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe8017"]).load(function(){
$("#iframe8017").height($("#iframe8017").contents().find("body").height()+showittryitheight);
});
$("#iframe8017").height($("#iframe8017").contents().find("body").height()+showittryitheight);
alreadyWriteCode8017 = code8017;
$("#rendering8017").hide();
$("#rendered8017").show();
}
var tRereshRetry2DemoPanel8017 = setInterval(rereshRetry2DemoPanel8017,1000);
var binded8017 = false;
$("textarea#stepcodeTextarea8017").keyup(function(){
if(!binded8017){
$(window).bind('beforeunload',function(){
binded8017 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code8017 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code8017!=newCode){
// window.frames["iframe8017"].document.write("
");
// window.frames["iframe8017"].document.write(decodeHtml($("textarea#stepcodeTextarea8017").val()));
// window.frames["iframe8017"].document.close();
// $(window.frames["iframe8017"]).load(function(){
// $("#iframe8017").height($("#iframe8017").contents().find("body").height()+showittryitheight);
// });
// code8017 = newCode;
// }
});
$(".tryButton8017").click(function(){
$("#tryDiv8017").show();
$("#stepcodeTextarea8017").focus();
$("#stepcodeTextarea8017").height(200);
$("#iframe8017").height(0);
window.frames["iframe8017"].document.write("
");
window.frames["iframe8017"].document.write(decodeHtml($("textarea#stepcodeTextarea8017").val()));
window.frames["iframe8017"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe8017"]).load(function(){
$("#iframe8017").height($("#iframe8017").contents().find("body").height()+showittryitheight);
});
$("#iframe8017").height($("#iframe8017").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor8017.focus();
editor8017.setSize(null, "250");
$("#rendering8017").hide();
$("#rendered8017").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor8017 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea8017"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor8017.on("change",function(doc){
if(!binded8017){
$(window).bind('beforeunload',function(){
binded8017 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code8017 = newCode;
$("textarea#stepcodeTextarea8017").val(newCode);
if(alreadyWriteCode8017!=code8017){
lastModifedTime8017 = new Date().getTime();
$("#rendering8017").show();
$("#rendered8017").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor8017 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor8017.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv8017").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
再运行命令
vue serve test.vue
然后在测试地址观察
http://localhost:8081/
可以看到如图所示的效果
刚才的例子是仅仅基于 test.vue 这么一个单个文件。 接下来，通过 vue-cli 创建一个项目
vue create hello-world
创建好之后，执行如下命令运行项目
cd hello-world
npm run serve
访问测试地址：
http://localhost:8081/
如图所示，这就启动了一个 vue 项目， 其实就是启动了 main.js 文件
E:\project\vue-cli\hello-world\src\main.js
间接得加载了 App.vue，然后又间接地加载了 components/HelloWorld.vue 文件。 HelloWorld.vue文件里，就是上面这些 html 超链了。。。 那么为什么启动了 main.js 就可以把这些都搞进来呢？ 那么就是用到了教程一开头说到了 webpack 了。 不明白这个的同学请学习： webpack 入门教程
vue-cli ，单页应用 SPA(single page application) 开发的时候是很方便的，但是多页复杂系统的话用起来就比较麻烦了。
并不是 vue-cli 不支持 多页系统， 而是为了让 vue-cli 支持多页系统，需要额外装很多插件和工具，用起来就相当的麻烦。。。
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
