Vue了解和开发使用流程

在上一节 windows下搭建好环境后，创建了项目 mytest

1】我用sublime打开项目，然后在命令行下输入npm run dev

2】此时已启动项目，在localhost:8080下可以调试学习了。

这节就是根据官方文档，进行学习。

一、项目结构

目录结构
–build：代码存放位置
–config：配置端口…信息等等
–node_modules：npm加载的项目依赖模块
–src：assets：放置一些图片，如logo等
components：里面是组件文件，里面写一些.vue文件在调用到app.vue中，可以起到解耦；
App.vue：项目入口文件，个人感觉使用components目录才能体现Vue强大
main.js：项目的核心文件
–static：静态资源目录，如图片、字体
–test：初始化测试目录，KS
–.xxx文件：这是一些配置文件，包括语法配置，git配置等
–index.html：首页入口文件
–package.json：项目配置文件
–README：项目的说明文件，有命令语句介绍，挺方便

二、sublime高亮Vue代码
1]：去github下载zip >https://github.com/vuejs/vue-syntax-highlight
2]：下载后，解压文件
3]：打开sublime–>Preferences–>Browse Packages…
这里写图片描述
点击Preferences –> Browse Packages… 后会打开文件夹，在该目录下创建Vue文件夹，将之前下载好的zip解压文件内容，复制到Vue文件夹下

4]：打开sublime菜单栏的 Tools –> Command Palette…

5]：这样就ok了，如果不信关闭ide在打开试试（如果sublime菜单栏隐藏找不到，尝试Alt键）

三、sublime格式化vue代码：
1]：菜单栏中点击Preferences–>KeyBindings

2]：将系统自带的快捷设置，复制到右边
这里写图片描述
3]：在刚创建的里面添加一下代码即可（我是设置的ctrl+alt+l,可以自定义）

    {"keys": ["ctrl+alt+l"], "command": "reindent" , "args":
        {"single_line": false}},

这里写图片描述

四、创建components下的.vue文件，App.vue调用
*由于公司电脑有HBuilder、家里的电脑是sublime3，所以整理中是两个编辑器，但是知识是一样的
1]新建src–components–test.vue文件

<template>
    <!--视图部分-->
    <div class="test">
        <h1>VueOneDemo</h1>
        <h1>{{user.firstName}}</h1>
        <h1 v-if="showName" v-text="user.lastName"></h1>

    </div>
</template>

<script>
    //逻辑部分
    export default {
        name: "test",
        data(){
            return{
                title:"Hello Vuew",
                user:{
                    firstName : "hi Bruce",
                    lastName : "hi jucie"
                },
                showName:true,
            }
        }

    }
</script>

<style scoped>
/*样式控制*/
</style>

Vue很好的将结构分为视图、样式、逻辑也就是引用了MVVM的精髓，
2]：在App.vue中的视图控制中，添加test就可以展示test.vue里的内容了。
*当然你得开启npm run dev

<template>
  <div id="app">
    <test></test>
  </div>
</template>

Vue了解和开发使用流程

猜你喜欢