Vue-cli-10-xiaoming

2018-10 -23

一、由于时间过了好久的缘故,Vue的好多知识都已经日渐模糊了,所以,我们先一起来复习一下Vue。

1.vue的简介;
三大主流框架:vue/angular/react
2.vue的概念;
3.过滤器;
4.vue的计算属性 ;
处理复杂的逻辑操作;
5.vue的组件;
扩展html元素,封装可重用代码。
6.vue的组件中传值;
7.生命周期和路由(路由的嵌套,路由的传参);
8.vue中的ajax(axios)。
二、coding在Git中:
①先输入git init;
②git add .;
③git commit -m "项目";
④git remote add origin https://git .coding.net./QAQming/robot.git;
⑤gIt push -u origin master。

QAQ:在没有index链接 后+"/文件名.html"

QAQ:安装“淘宝镜像”(cnpm)==>这样可以快速的执行其他指令了。

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

QAQ:在Git中不能用“ctrl+c”或者“ctrl+v”来复制粘贴。且ctrl+c在Git中为结束上一步指令。

三、vue-cli脚手架(搭建项目结构)
1.xxx.vue==>单文件组件。

<template>

html

</template>
<style>

css

</style>
<script>

js

</script>

3.也就是重中之重了:利用webpack做vue-cli。

①webpack(对代码进行压缩)
cnpm install webpack -g
②vue-cli
cnpm install vue-cli -g
③搭建一个项目(webpack模板)
vue init webpack webpack-demo

QAQ:webpack-demo为项目名称。

QAQ:且注意安装相关依赖之前其是否在项目文件夹中,若不在,在Git中

cd 项目名 ,让其进入文件夹。

④安装相关依赖(安装node_modules文件夹)
cnpm install
⑤开启一个服务
npm run dev

QAQ:在vue-cli中:

1.网站的公共样式放到App.vue中
2.在router中的index.js中配置路由
3.在components中创建xxx.vue,写
<template>

html

切记在写html时必须要有一个最大的盒子(div)来包裹

</template>
<style>

css

</style>
<script>

js

</script>
4.在static中创建css,images,······
在static中的css中放的是通用样式,然后链接到index.html
images中放的就是你所需要的图片了,且注意他的路径是相对还是绝对的

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 《残荷泣》 难忘夏盛别样红, 游仙影摄捧为恭。 秋来霜花卸颜值, 残歌薄情冷雨浓。 衷肠难抒时展空, 雪卧善遮饰颜...
    纯水陆零阅读 213评论 4 7
  • 這兩天的週末,一切都是那樣剛剛好。爸爸媽媽來了,剛好週末也沒課,焦點都在父母那裡…… 陪著父母吃飯,看著他們對不熟...
    好彩妹阅读 295评论 0 1
  • 傍晚去买水果,以前经常去的那个摊位竟然没卖,他对面的那个摊贩有卖,我就过去找他买了,电子秤上显示的价格是6.05,...
    烦人的昵称阅读 250评论 0 0
  • 第一篇阅读的层次 0x01 阅读的活力与艺术 一本书如果越专注越主动的读,效果越好。阅读的艺术指的是掌握不同信息的...
    ResearchWorld阅读 262评论 0 0
  • 感恩老婆对我事业的支持,感恩黄总,叶总对我的工作的支持,感恩光宝宝的快乐成长,感恩父母及丈母娘丈人对光宝宝的付出,...
    日精进_a07d阅读 118评论 0 1