Vue CLI 初体验之如何创建一个项目并打开，以及组件的简单使用案例。

目录

什么是Vue CLI?

如何使用Vue CLI 创建一个项目 

1.win+r 打开cmd 输入vue create 1127(1127是文件名)

2.配置基础设置

选择Manually select features

选择Router和Vuex

 选中vue版本（我这里选vue3）

剩下的看自己需要，如果不确定就一直按回车键下载就可以了

项目创建成功 

直接在vscode打开 使用ctrl+j 调出终端选择cmd，输入npm/yarn run serve   

点击链接

查看 

案例组件的使用

效果预览图

解析 

相关代码 

组件一

组件二

组件三

组件四

HomeView

---

什么是Vue CLI?

Vue CLI是一个基于Vue.js进行快速开发的完整系统。它提供了多种功能：

1. 交互式的项目脚手架：通过使用@vue/cli命令，可以快速创建一个新的Vue项目框架，方便快捷地搭建基于Vue框架的开发环境3。

2. 零配置原型开发：通过使用@vue/cli和@vue/cli-service-global命令，可以进行零配置的原型开发，快速验证和实验新的想法3。

3. 运行时依赖：Vue CLI提供了一个运行时依赖@vue/cli-service，它是一个基于webpack构建的工具，具有合理的默认配置，并且可以通过项目内的配置文件进行自定义配置。同时，它还可以通过插件进行扩展，集成了前端生态中最好的工具3。

4. 官方插件集合：Vue CLI还提供了丰富的官方插件集合，这些插件集成了前端生态中最好的工具，可以帮助开发者更高效地开发Vue.js项目3。

5. 图形化用户界面：Vue CLI提供了一套完全图形化的用户界面，可以用于创建和管理Vue.js项目，使项目的创建和管理更加直观和方便3。

如何使用Vue CLI 创建一个项目 

注意:要先确定自己要在哪一个文件夹里创建项目，并且项目打开后vscode里应该有且仅有一个项目。

1.win+r 打开cmd 输入vue create 1127(1127是文件名)

2.配置基础设置

选择Manually select features

选择Router和Vuex

注意：使用空格键选择是否选中

 选中vue版本（我这里选vue3）

剩下的看自己需要，如果不确定就一直按回车键下载就可以了

项目创建成功 

直接在vscode打开 使用ctrl+j 调出终端选择cmd，输入npm/yarn run serve   

点击链接

查看 

 

 接下来你就可以根据自己的项目进行编程了。

案例组件的使用

效果预览图

解析 

相关代码 

组件一

<template>
  <div class="nav">
   全部订单
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>


<style scoped>
.nav{
  width: 640px;
  height: 90px;
  background: #00aaee url(../assets/fh.png)no-repeat 27px center;
  line-height: 90px;
  text-align: center;
  font-size: 32px;
  color: #ffffff;
}
</style>

组件二

<template>
    <input type="text" >
</template>

<script>
export default {
    name: '1127Shousuo',

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
    },
};
</script>

<style lang="scss" scoped>
input{
    display: block;
    width: 578px;
    padding-left: 10px;
    height: 70px;
    margin: 22px auto;
    border: 1px #ccc solid;
    border-radius: 5px;
    font-size: 27px;
    color: #ababab;
    background: #e4e4e4 url(../assets/Ellipse-32.png)no-repeat center center;
}
input:focus{
    background: #e4e4e4;
}
</style>

组件三

<template>
    <div class="cont" v-for="(item,index) in arr">
         <div class="ccc">
         <span>{{ arr[index].title }}</span>
         <span>{{ arr[index].bj }}</span>
         <span><img src="../assets/Rectangle-3.png" alt=""></span>
         </div>
         <p>{{ arr[index].cgs }}</p>
         <div class="xx">
            <button class="cg">采购单详情</button>
            <button class="bj">报价详情</button>
         </div>
    </div>
</template>

<script>
export default {
    name: '1127Cont',

    data() {
        return {
            arr:[
                {title:'实验室设备及材料采购清单',cgs:'采购商：微梦创想科技有限公司',bj:'￥9999'},
                {title:'东营安诺其采购询价 ',cgs:'采购商：微梦创想科技有限公司',bj:'￥9999'},
                {title:'DZ47-63C16 1P高分断小  ',cgs:'采购商：微梦创想科技有限公司',bj:'￥9999'},
                {title:'实验室设备及材料采购清单',cgs:'采购商：微梦创想科技有限公司',bj:'￥9999'},
            ]
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
}
.cont{
    width: 586px;
    height: 200px;
    background: #fff;
    margin-bottom: 20px;
    padding: 0 27px;
}
.ccc{
    display: flex;
    align-items: center;
    font-size: 30px;
    color: #333333;
    height: 60px;
}
.ccc span:nth-child(2){
    margin-left: 20px;
    color: #ff0505;
}
.ccc span:nth-child(1){
   width: 450px;
}
.ccc span:nth-child(3){
   margin-left: 20px;
}
p{
    font-size: 24px;
    color: #969696;
    margin-bottom: 25px;
}
.xx{
    height: 87px;
    width: 586px;
    border-top: 1px #dddddd solid;
}
button{
    font-size: 24px;
    color: #333333;
    height: 50px;
    width: 158px;
    border: 1px #dddddd solid;
    margin-top: 18px;
    background: #ffffff;
    border-radius: 4px;
}
.cg{
    margin-left: 243px;
}
.bj{
    margin-left: 32px;
    width: 150px;
    border: 1px #ff0202 solid;
    color: #ff0505;
}
</style>

组件四

<template>
    <div class="d-nav">
        <div @click="num=1" :style="num==1&&'on'" >
        <img src="../assets/2.png" alt="">
        <span >首页</span>
        </div>
        <div  @click="num=2" :style="num==2&&'on'">
        <img src="../assets/4.png" alt="">
        <span >我的订单</span>
        </div>
        <div  @click="num=3" :style="num==3&&'on'">
        <img src="../assets/3.png" alt="">
        <span >站内信</span>
        </div>
        <div  @click="num=4" :style="num==4&&'on'">
        <img src="../assets/1.png" alt="">
        <span >我的资料</span>
        </div>
    </div>
</template>

<script>
export default {
    name: '1127DiNav',

    data() {
        return {
            num:2
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="scss" scoped>
.d-nav{
    height: 85px;
    width: 640px;
    background: #fff;
    display: flex;
    justify-content: space-between;
}
.d-nav div{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.d-nav div img{
    margin-bottom: 5px;
}
.d-nav div:nth-of-type(2) span{
    color: #40bff2;
}
.d-nav .on {
    color: #40bff2;
}
</style>

HomeView

<template>
  <HelloWorld></HelloWorld>
  <Shousuo></Shousuo>
  <Cont></Cont>
  <DiNav></DiNav>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import Shousuo from '@/components/Shousuo.vue';
import Cont from '@/components/Cont.vue';
import DiNav from '@/components/DiNav.vue';
export default {
  name: 'HomeView',
  components: {
    HelloWorld,
    Shousuo,
    Cont,
    DiNav
  }
}
</script>