Vue之vue自动化工具快速搭建单页项目目录
1 生成项目目录
使用vue自动化工具可以快速搭建单页应用项目目录。
该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:
- // 生成一个基于 webpack 模板的新项目
- vue init webpack 项目名
- 例如:
- vue init webpack myproject
- // 启动开发服务器 ctrl+c 停止服务
- cd myproject
- 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.单文件组件的使用
组件有两种:普通组件、单文件组件
普通组件的缺点:
html代码是作为js的字符串进行编写,所以组装和开发的时候不易理解,而且没有高亮效果。
普通组件用在小项目中非常合适,但是复杂的大项目中,如果把更多的组件放在html文件中,那么维护成本就会变得非常昂贵。
普通组件只是整合了js和html,但是css代码被剥离出去了。使用的时候的时候不好处理。
将一个组件相关的html结构,css样式,以及交互的JavaScript代码从html文件中剥离出来,合成一个文件,这种文件就是单文件组件,相当于一个组件具有了结构、表现和行为的完整功能,方便组件之间随意组合以及组件的重用,这种文件的扩展名为“.vue”,比如:"Home.vue"。
4.1 创建组件
在组件中编辑三个标签,编写视图、vm对象和css样式代码,我们一般的组件都会在compoments文件夹下创建.
4.1.1 template 编写html代码的地方
- <template>
- <div id="Home">
- <span @click="num--" class="sub">-</span>
- <input type="text" size="1" v-model="num">
- <span @click="num++" class="add">+</span>
- </div>
- </template>
- 注意:1.一个template里面只能由一个大的div标签包住所有的标签(包括div)
- 2.最外层不能出现两个及以上的div标签不然会报错
4.1.2 script编写vue.js代码
- <script>
- export default {
- name:"Home",
- data: function(){
- return {
- num:0,
- }
- }
- }
- </script>
- 注意:
- 1.name的值必须和template中最外层中控制的DIV标签的id值保持一致
- 2.data必须采用此种形式 即data:function(){
- return{
- num:0,
- }
- }
- 将定义的数值按此种形式返回
4.1.3 style编写当前组件的样式代码
- <style scoped>
- .sub,.add{
- border: 1px solid red;
- padding: 4px 7px;
- }
- </style>
- scoped 代表局部样式,不会影响到别的组件
注意:
讲一个组件写好后,若要调用,需要在app.vue引入,代码如下:
- <template>
- <div id="app">
- <img src="./assets/logo.png">
- <HelloWorld/>
- <hr>
- <Home></Home> //在此处调用Home
- </div>
- </template>
- <script>
- import HelloWorld from './components/HelloWorld' //在此处引入组件
- import Home from './components/Home'
- export default {
- name: 'App',
- components: {
- HelloWorld,
- Home //在compoents下注册改组件
- }
- }
- </script>
- <style>
- #app {
- font-family: 'Avenir', Helvetica, Arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-align: center;
- color: #2c3e50;
- margin-top: 60px;
- }
- </style>
5.组件的嵌套
有时候开发vue项目时,页面也可以算是一个大组件,同时页面也可以分成多个子组件.因为,产生了父组件调用子组件的情况.
例如,我们可以声明一个组件,作为父组件在components/创建一个保存子组件的目录HomeSon
在HomeSon目录下,可以创建当前页面的子组件,例如,是Menu.vue
- // 组件中代码必须写在同一个标签中
- <template>
- <div id="menu">
- <span>{{msg}}</span>
- <div>hello</div>
- </div>
- </template>
- <script>
- export default {
- name:"Menu",
- data: function(){
- return {
- msg:"这是Menu组件里面的菜单",
- }
- }
- }
- </script>
然后,在父组件中调用上面声明的子组件。
最后,父组件被App.vue调用.就可以看到页面效果.
Vue之vue自动化工具快速搭建单页项目目录的更多相关文章
- webpack入门级 - 从0开始搭建单页项目配置
前言 webpack 作为前端最知名的打包工具,能够把散落的模块打包成一个完整的应用,大多数的知名框架 cli 都是基于 webpack 来编写.这些 cli 为使用者预设好各种处理配置,使用多了就会 ...
- 前后端分离最佳实现,使用Nuxt.js快速搭建单页SSR应用
通常我们搭建ssr应用需要自己选择多个组件集成到一起 webpack babel loaders router server-render 各种入口配置等 如果是基于vue+vuex+vue-rout ...
- Vue系列-03-vue-cli自动化工具
使用Vue-CLI创建项目 安装vue-cli脚手架 Mac安装vue-cli脚手架 lichengguo@lichengguodeMacBook-Pro ~ % sudo npm install - ...
- 脚手架快速搭建springMVC框架项目
apid-framework脚手架快速搭建springMVC框架项目 rapid-framework介绍: 一个类似ruby on rails的java web快速开发脚手架,本着不重复发明轮 ...
- 基于 intellij IDEA 快速搭建Spring Boot项目
在<一步步搭建 Spring Boot maven 框架的工程>一文中,已经介绍了如何使用Eclipse快速搭建Spring Boot项目.由于最近将开发工具由Eclipse ...
- vue基础 (三) 自动化工具(Vue CIL)
一.自动化工具(Vue CIL) 安装过程 1. 先安装nvm 参考:https://www.jianshu.com/p/d0e0935b150a https://www.cnblogs.com/tj ...
- 使用vue脚手架(vue-cli)快速搭建项目
一.从最简单的环境搭建开始: 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装).安装完成之后,打开命令行工具(win+r,然后输入cmd ...
- vue + element-ui 制作tab切换(适用于单页切换不同标记显示不同内容)
本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...
- Vue.js结合vue-router和webpack编写单页路由项目
一.前提 1. 安装了node.js. 2. 安装了npm. 3. 检查是否安装成功: 打开cmd,输入node,没有报“node不是内部或外部命令”表示安装成功node.js. 打开cmd,输入np ...
随机推荐
- 【修改缓存路径】修改Gradle缓存路径的几种方式
起因 Android Studio的gradle在缓存处理上有时候会莫名其妙的出问题,必要时需要手动删除缓存,然后重新编译.有时也有出于其他考虑指定gradle缓存路径. 方法1:修改gradle文件 ...
- Sql 通过表名查找所有列名
SELECT * FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME = 'ImmediacyOutKu'
- PHP变量的值类型和引用类型
PHP 变量在内存中保存的并不直接是值的内容而是值的地址.比如: $a = 1; 从表面上看起来似乎是 $a 直接存储了 1 这个值.但是实际情况是,PHP 解释器创建了变量 $a , 将值 1 存入 ...
- Android之使用传感器获取相应数据
Android的大部分手机中都有传感器,传感器类型有方向.加速度(重力).光线.磁场.距离(临近性).温度等. 方向传感器: Sensor.TYPE_ORIENTATION 加速度(重力)传感器: ...
- bean之间的属性是怎么维护的
spring对象[bean]之间的属性是通过什么维护的: 1.构造方法:标签:constructor-arg 2.set方法:标签:property <beans xmlns="htt ...
- React组件导入的两种方式(动态导入组件的实现)
一. react组件两种导入方式 React组件可以通过两种方式导入另一个组件 import(常用) import component from './component' require const ...
- 理解 Redis(5) - 哈希值
哈希值存储示意图:首先, 我想先认真理解一下哈希值的数据结构:前面讲过, redis 存储的是键值对, 键永远都是可以打印的 ASCII 码, 值是字符串, 或者是以其他形式包裹的字符串. 上两节介绍 ...
- hdu 2034 改革春风吹满地 多边形面积
改革春风吹满地 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem ...
- Spring Security 中的加密BCryptPasswordEncoder
// // Source code recreated from a .class file by IntelliJ IDEA // (powered by Fernflower decompiler ...
- 把查询的数据导出到elsx表 关于流的概念
1.获取到需要导出的数据 因为这个对象是PagedResulDto类型的 所以封装成Table的时候 传pageList.Items就可以了 PagedResultDto<Search ...