Vue-Cli脚手架

Vue-cli脚手架

这篇总结主要介绍Vue-Cli脚手架

概念:
1.vue-cli : 组件化开发工具，底层基于webpack
2.脚手架 : 规范的vue项目目录

如何创建一个vue?:vue create 项目名称
脚手架目录

node_modules : 第三方包资源文件
public
	favicon.ico : 网站图标
		index.html : 网站首页
src
	assets: 静态资源(图片)
	logo.png
components: 组件
App.vue :  根组件
main.js :  入口文件
.gitignore:  git忽略文件
babel.config.js :  js版本降级
package.json :  依赖包列表+版本
README.md : 项目说明文件
package-lock.json : 包下载地址
vue.config.js : 项目webpack配置

​

1.组件

是什么 ?

1.HTML :  自定义标签
2.文件 ：  .vue文件
3.内存 ： vue实例对象
4.页面：  盒子

组件作用 : 盒子复用

组件三要素

HTML结构:  <template>
js代码:  <script>
css样式:  <style>

2.脚手架流程

(0)创建项目： vue create 项目名称
(1)关闭eslint ( 代码规范检查)
   LintOnSave:false
(2)删除欢迎页面
   删除 components/HelloWorld.vue
   清空App.vue代码
(3)运行项目： 根目录  npm run serve
(4)掌握vue调试技巧
   数据  dev tools 工具
   方法 debugger

3.组件注册

局部组件：在哪里导入，只能在哪里使用

1.导入组件：  import 组件名 from "组件路径"
2. 注册组件:  components : { 组件名 }
3. 使用组件: <子组件></子组件>
    全局组件：main.js 导入，任何.vue文件可以用
    1.导入组件 ：  import 组件名 from "组件路径"
    2.注册组件: Vue.component( '标签名' , 组件名)
    这行代码底层原理是把组件放入Vue.prototype 中
4. 使用组件: <子组件></子组件>

组件css作用域：scoped

1.scoped作用： 设置子组件css作用域，避免子组件样式被父组件覆盖
2.scoped原理： 给子组件添加自定义属性data-v-xxxx , 通过属性选择器增加css权重