1 生成项目目录

使用vue自动化工具可以快速搭建单页应用项目目录。

该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:

  1. // 生成一个基于 webpack 模板的新项目
  2. vue init webpack 项目名
  3. 例如:
  4. vue init webpack myproject
  5.  
  6. // 启动开发服务器 ctrl+c 停止服务
  7. cd myproject
  8. npm run dev # 运行这个命令就可以启动node提供的测试http服务器

提示:
在创建项目的时候会问你许多要不要装的东西,输入NO即可,项目生成以后按自己需求安装即可

2 .项目目录结构

src 主开发目录,要开发的单文件组件全部在这个目录下的components目录下

static 静态资源目录,所有的css,js文件放在这个文件夹

dist项目打包发布文件夹,最后要上线单文件项目文件都在这个文件夹中[后面打包项目,让项目中的vue组件经过编译变成js 代码以后,dist就出现了]

node_modules目录是node的包目录,

config是配置目录,

build是项目打包时依赖的目录

src/router 路由,后面需要我们在使用Router路由的时候,自己声明.

3 .项目执行流程图

总结:

  整个项目是一个主文件index.html,

   index.html中会引入src文件夹中的main.js,

  main.js中会导入顶级单文件组件App.vue,

  App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。

4.单文件组件的使用

组件有两种:普通组件、单文件组件

普通组件的缺点:

  1. html代码是作为js的字符串进行编写,所以组装和开发的时候不易理解,而且没有高亮效果。

  2. 普通组件用在小项目中非常合适,但是复杂的大项目中,如果把更多的组件放在html文件中,那么维护成本就会变得非常昂贵。

  3. 普通组件只是整合了js和html,但是css代码被剥离出去了。使用的时候的时候不好处理。

将一个组件相关的html结构,css样式,以及交互的JavaScript代码从html文件中剥离出来,合成一个文件,这种文件就是单文件组件,相当于一个组件具有了结构、表现和行为的完整功能,方便组件之间随意组合以及组件的重用,这种文件的扩展名为“.vue”,比如:"Home.vue"。

4.1 创建组件

在组件中编辑三个标签,编写视图、vm对象和css样式代码,我们一般的组件都会在compoments文件夹下创建.

4.1.1 template 编写html代码的地方

  1. <template>
  2. <div id="Home">
  3. <span @click="num--" class="sub">-</span>
  4. <input type="text" size="1" v-model="num">
  5. <span @click="num++" class="add">+</span>
  6. </div>
  7. </template>
  8.  
  9. 注意:1.一个template里面只能由一个大的div标签包住所有的标签(包括div)
  10. 2.最外层不能出现两个及以上的div标签不然会报错

4.1.2 script编写vue.js代码

  1. <script>
  2. export default {
  3. name:"Home",
  4. data: function(){
  5. return {
  6. num:0,
  7. }
  8. }
  9. }
  10. </script>
  11.  
  12. 注意:
  13. 1.name的值必须和template中最外层中控制的DIV标签的id值保持一致
  14. 2.data必须采用此种形式 即data:function(){
  15. return{
  16. num:0,
  17. }
  18. }
  19.  
  20. 将定义的数值按此种形式返回

4.1.3 style编写当前组件的样式代码

  1. <style scoped>
  2. .sub,.add{
  3. border: 1px solid red;
  4. padding: 4px 7px;
  5. }
  6. </style>
  7.  
  8. scoped 代表局部样式,不会影响到别的组件

注意:

讲一个组件写好后,若要调用,需要在app.vue引入,代码如下:

  1. <template>
  2. <div id="app">
  3. <img src="./assets/logo.png">
  4. <HelloWorld/>
  5. <hr>
  6. <Home></Home> //在此处调用Home
  7. </div>
  8. </template>
  9.  
  10. <script>
  11. import HelloWorld from './components/HelloWorld' //在此处引入组件
  12. import Home from './components/Home'
  13. export default {
  14. name: 'App',
  15. components: {
  16. HelloWorld,
  17. Home //在compoents下注册改组件
  18. }
  19. }
  20. </script>
  21.  
  22. <style>
  23. #app {
  24. font-family: 'Avenir', Helvetica, Arial, sans-serif;
  25. -webkit-font-smoothing: antialiased;
  26. -moz-osx-font-smoothing: grayscale;
  27. text-align: center;
  28. color: #2c3e50;
  29. margin-top: 60px;
  30. }
  31. </style>

5.组件的嵌套

  有时候开发vue项目时,页面也可以算是一个大组件,同时页面也可以分成多个子组件.因为,产生了父组件调用子组件的情况.

例如,我们可以声明一个组件,作为父组件在components/创建一个保存子组件的目录HomeSon

在HomeSon目录下,可以创建当前页面的子组件,例如,是Menu.vue

  1. // 组件中代码必须写在同一个标签中
  2. <template>
  3. <div id="menu">
  4. <span>{{msg}}</span>
  5. <div>hello</div>
  6. </div>
  7. </template>
  8.  
  9. <script>
  10. export default {
  11. name:"Menu",
  12. data: function(){
  13. return {
  14. msg:"这是Menu组件里面的菜单",
  15. }
  16. }
  17. }
  18. </script>

然后,在父组件中调用上面声明的子组件。

最后,父组件被App.vue调用.就可以看到页面效果.

Vue之vue自动化工具快速搭建单页项目目录的更多相关文章

  1. webpack入门级 - 从0开始搭建单页项目配置

    前言 webpack 作为前端最知名的打包工具,能够把散落的模块打包成一个完整的应用,大多数的知名框架 cli 都是基于 webpack 来编写.这些 cli 为使用者预设好各种处理配置,使用多了就会 ...

  2. 前后端分离最佳实现,使用Nuxt.js快速搭建单页SSR应用

    通常我们搭建ssr应用需要自己选择多个组件集成到一起 webpack babel loaders router server-render 各种入口配置等 如果是基于vue+vuex+vue-rout ...

  3. Vue系列-03-vue-cli自动化工具

    使用Vue-CLI创建项目 安装vue-cli脚手架 Mac安装vue-cli脚手架 lichengguo@lichengguodeMacBook-Pro ~ % sudo npm install - ...

  4. 脚手架快速搭建springMVC框架项目

    apid-framework脚手架快速搭建springMVC框架项目   rapid-framework介绍:   一个类似ruby on rails的java web快速开发脚手架,本着不重复发明轮 ...

  5. 基于 intellij IDEA 快速搭建Spring Boot项目

           在<一步步搭建 Spring Boot maven 框架的工程>一文中,已经介绍了如何使用Eclipse快速搭建Spring Boot项目.由于最近将开发工具由Eclipse ...

  6. vue基础 (三) 自动化工具(Vue CIL)

    一.自动化工具(Vue CIL) 安装过程 1. 先安装nvm 参考:https://www.jianshu.com/p/d0e0935b150a https://www.cnblogs.com/tj ...

  7. 使用vue脚手架(vue-cli)快速搭建项目

    一.从最简单的环境搭建开始: 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装).安装完成之后,打开命令行工具(win+r,然后输入cmd ...

  8. vue + element-ui 制作tab切换(适用于单页切换不同标记显示不同内容)

    本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...

  9. Vue.js结合vue-router和webpack编写单页路由项目

    一.前提 1. 安装了node.js. 2. 安装了npm. 3. 检查是否安装成功: 打开cmd,输入node,没有报“node不是内部或外部命令”表示安装成功node.js. 打开cmd,输入np ...

随机推荐

  1. 【修改缓存路径】修改Gradle缓存路径的几种方式

    起因 Android Studio的gradle在缓存处理上有时候会莫名其妙的出问题,必要时需要手动删除缓存,然后重新编译.有时也有出于其他考虑指定gradle缓存路径. 方法1:修改gradle文件 ...

  2. Sql 通过表名查找所有列名

    SELECT * FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME = 'ImmediacyOutKu'

  3. PHP变量的值类型和引用类型

    PHP 变量在内存中保存的并不直接是值的内容而是值的地址.比如: $a = 1; 从表面上看起来似乎是 $a 直接存储了 1 这个值.但是实际情况是,PHP 解释器创建了变量 $a , 将值 1 存入 ...

  4. Android之使用传感器获取相应数据

    Android的大部分手机中都有传感器,传感器类型有方向.加速度(重力).光线.磁场.距离(临近性).温度等. 方向传感器:   Sensor.TYPE_ORIENTATION 加速度(重力)传感器: ...

  5. bean之间的属性是怎么维护的

    spring对象[bean]之间的属性是通过什么维护的: 1.构造方法:标签:constructor-arg 2.set方法:标签:property <beans xmlns="htt ...

  6. React组件导入的两种方式(动态导入组件的实现)

    一. react组件两种导入方式 React组件可以通过两种方式导入另一个组件 import(常用) import component from './component' require const ...

  7. 理解 Redis(5) - 哈希值

    哈希值存储示意图:首先, 我想先认真理解一下哈希值的数据结构:前面讲过, redis 存储的是键值对, 键永远都是可以打印的 ASCII 码, 值是字符串, 或者是以其他形式包裹的字符串. 上两节介绍 ...

  8. hdu 2034 改革春风吹满地 多边形面积

    改革春风吹满地 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Problem ...

  9. Spring Security 中的加密BCryptPasswordEncoder

    // // Source code recreated from a .class file by IntelliJ IDEA // (powered by Fernflower decompiler ...

  10. 把查询的数据导出到elsx表 关于流的概念

    1.获取到需要导出的数据   因为这个对象是PagedResulDto类型的   所以封装成Table的时候  传pageList.Items就可以了 PagedResultDto<Search ...