feat: 初始化

第二部分 Web 前端/2.9.md

@@ -0,0 +1,241 @@
+
+> vue-cli作为vue的脚手架，可以帮助我们在实际开发中自动生成vue.js的模板工程。第一次使用这个工具，记录下步骤
+
+
+
+前提：需要 vue 和 webpack
+
+1、全局安装 vue-cli
+
+```
+npm install vue-cli -g
+```
+
+2、初始化
+
+```
+vue init webpack 项目名称
+```
+
+学过 Node 的人都知道此时会生成一个 package.json 文件，需要你输入或者选择一些工程信息。
+
+3、进入项目文件夹
+
+```
+cd 项目名称
+```
+
+4、然后启动项目
+
+```
+npm run dev
+```
+
+
+
+
+
+## 关键点讲解
+
+1、程序主要入口是 main.js
+
+```
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = true
+
+/* eslint-disable no-new */
+new Vue({
+el:"#app",
+components:{App},
+template:'<App />'
+})
+```
+
+* 可以看到注册了 App 组建（Vue 是组件化思想）
+
+2、App.vue
+
+```
+<template>
+    <div id="app">
+        <img src="./assets/logo.png">
+        <HelloWorld/>
+    </div>
+</template>
+
+<script>
+
+    import HelloWorld from './components/HelloWorld'
+
+    export default {
+        name: "App",
+        components: {
+            HelloWorld
+        }
+    }
+</script>
+
+<style>
+    #app {
+        font-family: 'Avenir', Helvetica, Arial, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-align: center;
+        color: #2c3e50;
+        margin-top: 60px;
+    }
+</style>
+```
+
+* 导入了 HelloWorld 模块，并注册为一个组件。
+* 其中看到一个 name ，只有作为组件选项时起作用。允许组件模板递归地调用自身。注意，组件在全局用`Vue.component()`注册时，全局 ID 自动作为组件的 name。
+指定`name`选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有[vue-devtools](https://github.com/vuejs/vue-devtools)，未命名组件将显示成`<AnonymousComponent>`，这很没有语义。通过提供`name`选项，可以获得更有语义信息的组件树。
+
+* &lt;HelloWorld /&gt; 这样写就是将注册好的组件使用（可以看成是搭积木）
+
+3、HelloWorld.vue
+
+```
+<template>
+    <div class="hello">
+        <h1>{{ msg }}</h1>
+    </div>
+</template>
+
+
+<script>
+    export default {
+        name: 'HelloWorld',
+        data() {
+            return {
+                msg: 'Hello 杭城小刘，Welcome to Your Vue.js App'
+            }
+        }
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+    h1,
+    h2 {
+        font-weight: normal;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+    }
+
+    li {
+        display: inline-block;
+        margin: 0 10px;
+    }
+
+    a {
+        color: #42b983;
+    }
+</style>
+```
+
+* 做为组件，对外暴露了 name
+* {{msg}} 绑定了数据
+
+效果图
+
+![效果图](https://fantasticlbp.gitbooks.io/knowledge-kit/assets/Vue-20180225-1.png)
+
+## 实验
+
+有了基本的了解，我们参考 vue 的组件化思想，动手做一个展示 编程语言兴趣的小组件。
+
+
+
+```
+//Hobby.vue
+<template>
+    <div id="hobby">
+        <span>{{it}}</span>
+
+    </div>
+</template>
+
+
+<script>
+
+    export default {
+        name: "Hobby",
+        data() {
+            return {
+                it: "iOS、JS、Node、PHP、Vue、Python、Sass"
+            }
+        }
+    }
+
+</script>
+
+
+<style scoped>
+    #hobby {
+        color: red;
+        font-size: 30px;
+        text-decoration: underline;
+        line-height: 30px;
+    }
+</style>
+
+
+//HelloWorld.vue
+<template>
+    <div class="hello">
+        <h1>{{ msg }}</h1>
+        <Hobby />
+    </div>
+</template>
+
+
+<script>
+    import Hobby from './Hobby'
+
+
+    export default {
+        name: 'HelloWorld',
+        data() {
+            return {
+                msg: 'Hello 杭城小刘，Welcome to Your Vue.js App'
+            }
+        },
+        components: {
+            Hobby
+        }
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+    h1,
+    h2 {
+        font-weight: normal;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+    }
+
+    li {
+        display: inline-block;
+        margin: 0 10px;
+    }
+
+    a {
+        color: #42b983;
+    }
+</style>
+```
+
+效果图
+
+![添加了Hobby组件](https://fantasticlbp.gitbooks.io/knowledge-kit/assets/Vue-20180225-2.png)
+