vue脚手架

1.安装

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

2.创建vue项目

        cd /  切换到根目录

        创建一个叫myvue的项目：vue create myvue

        通过箭头选择vue2

        

 

        出现蓝色的字，代表创建项目成功

        切换到项目目录：cd myvue

        运行项目：npm run serve

        出现local和network项目启动成功

 

 

        项目目录结构

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

 

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

 

3.vue

        template 模板

                template有且只有一个子节点

                <template>
                    <div>
                        <p>内容</p>
                    </div>
              </template>

        script 逻辑

                data必须是函数返回一个值
                export default{
                    data(){
                        return {
                            msg:"脚手架写大项目"
                        }
                    }
                }

                

                vue 的指令连接了template和script
                <p class="green">{{msg}}</p>
                <input v-model="msg"/>

        style 样式

                定义样式
                <style>
                    .green{background-color:"green";color:"#fff";}
                </style>

                

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