在上一节 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>