vue脚手架

一、安装

        安装vue脚手架  npm i @vue/cli -g

二、创建vue项目

        1、cd /  切换到c盘根目录

        2、vue create myvue  创建一个叫myvue的项目

 

         3、运行项目

           cd  myvue   进入项目目录
           npm  run serve   运行项目

三、项目目录结构

        1、项目目录

         node_modules 插件安装目录
         public 公用文件和模板目录
         src  源文件目录
         .gitinore 上传到服务器忽略配置
         bable.config.js ES6转ES5配置
         jsconfig.json js配置
         *package.json 包管理(项目管理目录)
         package-lock.json 插件安装地址缓存
         README.md 项目说明文件
         vue.config.js vue项目配置文件

         2、src源文件目录

         --assets  资源目录
         --logo.png  logo
         --components 存储自定义组件目录
         --HelloWorld.vue  默认组件
         --*App.vue  vue组件
         --main.js  项目入口文件

 四、.vue

        1、template 模板
          template有且只有一个子节点
          <template>
             <div>

                <p>内容</p>

             </div>
         </template>

        2、script  逻辑
           1.data 必须是函数返回一个值
        export default{
          data(){

               return{

                    msg:"脚手架写大项目"

                   }

                }
        }
           2.vue指令连接了template和script
        <p class=“green”>{{msg}}</p>
        <input type="text" v-model="msg">

        3、style样式

           1.定义样式
           <style>
                .green{

                        background-color: green;

                        color: #fff;

                 }
           </style>

           2.可以通过scoped限定样式使用范围在本组件
                <style scoped="scoped"></style>
                <style scoped></style>