为什么不用#号？

1. 直接写<style>

2.在public中新建css文件，在源文件中导入@import “../../public/**.css"

3.在index.html中修改

npm run serve是vue-cli3的执行

对于2要使用npm run dev

type pa*

安装依赖：npm i  /cnpm i

初始化：npm init -f/cnpm init -f

安装组件，并查看安装后的内容

npm uni vue-cli -g

npm i -g  @vue/cli

cnpm i -g  @vue/cli

vue ui 图形界面

图形管理器

vue create  vue-test3

vue兄弟组件间传值

msg.js
import Vue from 'vue'
export default new Vue

AA.vue
import Msg from './msg'
Msg.$emit('eventBus' , '1')

BB.vue
import Msg from './msg'
Msg.$on('eventBus', function(data){console.log(data)})

vue以图形界面的方式创建vue项目

vue ui

cmd中查看文件内容命令

type index.js

安装cnpm命令

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

[
  {
    "goodName": "xiaoxin1",
    "img":"img/jsj/jsj1.png"
  },
  {
    "goodName": "xiaoxin2",
    "img":"img/jsj/jsj2.png"
  },
  {
    "goodName": "xiaoxin3",
    "img":"img/jsj/jsj3.png"
  },
  {
    "goodName": "xiaoxin4",
    "img":"img/jsj/jsj4.png"
  },
  {
    "goodName": "xiaoxin5",
    "img":"img/jsj/jsj5.png"
  },
  {
    "goodName": "xiaoxin6",
    "img":"img/jsj/jsj6.png"
  },
  {
    "goodName": "xiaoxin7",
    "img":"img/jsj/jsj7.png"
  },
  {
    "goodName": "xiaoxin8",
    "img":"img/jsj/jsj8.png"
  }
]

[
  {
    "goodName": "sxiaoxin1",
    "img":"img/sj/sj1.png"
  },
  {
    "goodName": "sxiaoxin2",
    "img":"img/sj/sj2.png"
  },
  {
    "goodName": "sxiaoxin3",
    "img":"img/sj/sj3.png"
  },
  {
    "goodName": "sxiaoxin4",
    "img":"img/sj/sj4.png"
  },
  {
    "goodName": "sxiaoxin5",
    "img":"img/sj/sj5.png"
  },
  {
    "goodName": "sxiaoxin6",
    "img":"img/sj/sj6.png"
  },
  {
    "goodName": "sxiaoxin7",
    "img":"img/sj/sj7.png"
  },
  {
    "goodName": "sxiaoxin8",
    "img":"img/sj/sj8.png"
  }
]

<template>
    <div name="show">
        ============
        <ul class="goodList">
            <li v-for="good in list">
                <img v-bind:src="good.img">
                <p>{{good.goodName}}</p>
            </li>
        </ul>
    </div>
</template>
<style type="text/css">
    .goodList li{
       width: 200px;
        height: 200px;
        list-style: none;
        float: left;
        font-size: 9px;
        color: red;
        margin-bottom: 30px;
    }
    .goodList img{
        width: 180px;
        height: 180px;
    }
</style>
<script type="text/javascript">
    export default {
        name:"show",
        data(){
            var _this = this;
            var url = "";
            console.log(_this.goodId);
            if(_this.goodId==1){
                url="jsj.json";
            }else if(_this.goodId==2){
                url="sj.json";
            }else{
                url="jsj.json";
            }
            this.$http.get(url).then(function (res) {
                _this.list = res.data
                console.log(_this.list);
            })
            return{
                list:[]
            }
        },
        props:{//父子组件的传值
            goodId: Number
        },
        watch:{//监听父子组件传值的过程
            goodId(){
                var obj = this;
                var  url = "";
                if(obj.goodId==1){
                    url="jsj.json";
                }else if(obj.goodId==2){
                    url="sj.json";
                }else{
                    url="jsj.json";
                }
                this.$http.get(url).then(function (res) {
                    obj.list = res.data
                    console.log(obj.list);
                })
                return{
                    list:[]
                }
            }
        }
    }
</script>

<template>
    <div>
        <div class="title">
            热门推荐
        </div>
        <div class="menu">
            <ul>
                <li @click="menu1">笔记本电脑 </li>
                <li @click="menu2">手机</li>
                <li @click="menu3">笔记本电脑 </li>
                <li>手机</li>
                <li>笔记本电脑 </li>
                <li>手机</li>
                <li>笔记本电脑 </li>
                <li>手机</li>
                <li>笔记本电脑 </li>
                <li>手机</li>
                <li>手机</li>
            </ul>
        </div>
    </div>
</template>
<style>
    .title{
        color: red;
        width: 100px;
    }
    .menu li{
        list-style: none;
        height: 50px;
        margin-bottom: 2px;
        line-height: 50px;
        background-color: #fcfcfc;
        cursor: pointer;
    }

</style>
<script type="text/javascript">
    import Msg from './msg.js'
    export default {
        methods:{
            menu1:function () {
                Msg.$emit("val","1")
            },
            menu2:function () {
                Msg.$emit("val","2")
            },
            menu3:function () {
                Msg.$emit("val","3")
            }
        }
    }
</script>

import Vue from 'vue'
export default new Vue

<template>
    <div>
        <div v-if="kk==1">
            <GoodList :goodId=1></GoodList>
        </div>
        <div v-else-if="kk==2">
            <GoodList :goodId="2"></GoodList>
        </div>
        <div v-else-if="kk==3">
           33333333333
        </div>
        <div v-else>
            <GoodList :goodId="0"></GoodList>
        </div>
    </div>
</template>
<script>
    import Msg from './msg.js'
    import GoodList from './goodsList.vue'
    export default {
        data(){
            return{
                kk:0
            }
        },
        mounted:function () {
            var _this = this
            Msg.$on('val',function (m) {
                _this.kk = m;
            })
        },
        components:{
            GoodList
        }
    }
</script>

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import First from '../views/First.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    component: First
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

<template>
    <div class="main">
        <div class="left">
            <Left></Left>
        </div>
        <div class="right" >
            <div class="top">
                <img src="img/title.png">
            </div>
            <div class="buttom">
                <Right></Right>
            </div>
        </div>
    </div>
</template>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .left{
        width: 100px;
        float: left;
        margin-right: 10px;
    }
    .right{
        width: 1000px;
        float: left;
        margin-left: 10px;
    }
    .main{
        width: 1200px;
        margin: 10px auto;
    }
    .top img{
        height: 200px;
        width:1000px;
    }
    .right,.left{
        background-color: #f5f5f5;
        height: 500px;
    }
</style>
<script type="text/javascript">
    import Left from "../components/Left.vue"
    import Right from "../components/Right.vue"
    export default {
        components:{
            Left,
            Right
        }
    }
</script>

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/first'
import A from '@/components/A'
import B from '@/components/B'
import A1 from '@/components/A1'

Vue.use(Router)

export default new Router({
  mode:'history',//使得访问地址栏中没有#
  routes: [
    {
      path: '/',
      name: 'First',
      component: First,
      children:[
        {
          path: '/a',
          name: 'A',
          component: A
        },
        {
          path: '/b',
          name: 'B',
          component: B
        },
        {
          path: '/a/a1',
          name: 'A1',
          component: A1
        }
      ]
    },

  ]
})

<template>
  <div>
    first.vue
    <router-link to="/a">转向A页面</router-link>
    <router-link to="/b">转向B页面</router-link>

    <router-view></router-view><!--    子路由挂载-->
  </div>
</template>

<script>

</script>

<style >

</style>

<template>
  <div>
    <p>我是A……</p>
    <p><router-link to="/a/a1">转向A1</router-link></p>
    <p><router-link to="/">返回</router-link></p>
  </div>
</template>

<script>

</script>

<style >

</style>

<template>
  <div>
    <p>我是B……</p>
    <p><router-link to="/">返回</router-link></p>
  </div>
</template>

<script>

</script>

<style >

</style>

<template>
  <div>
    <p>我是A1……</p>
    <p><router-link to="/">返回</router-link></p>
  </div>
</template>

<script>

</script>

<style >

</style>

<!--APP.vue是主组件，路由（index.js）里的每个内容理解为子组件-->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/><!--    这里挂载index.js这个路由-->
  </div>
</template>

<script>
export default {
  name: 'App'
}
</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>