vue_demo目录结构截图:

(1)图一

(2).图二

(3).图三

(四).图四

(5).图五

(6).图六

(7).图七

不能随便改入口文件的名字,因为已经配置好了

(8).图八

(9).图九

(10).图十

===================================================================

(11).main.js文件解析

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App' Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
//组件,简写为App,可以点进去;
//什么是组件?一个局部功能界面(html/js/css/img),包含了实现功能界面的所有资源
components: { App },
//模板
template: '<App/>'
})
==============================================================================

图十一

上图为一个组件

(12)

.jsx文件:就是js+xml

.less文件:就是样式文件

(13)根标签通常放在src的根目录下,App.vue+main.js放在src的根目录下

其他组件新建文件夹components,放到这个文件夹下

(14).

File-->settings

关闭jslint+eslint+jshint这三个自动检查,去掉Enable前面的对勾

(15).vue文件的模板

(16).创建模板文件

Editor-->File and Code Templates-->选择vue

Name:vue     Extention(后缀):vue

内容如下:

<template>
<div>

</div>
</template>

<script>
export default{

}
</script>

<style>

</style>

(17).HelloWorld.vue

<template>
<div>
<p class="msg">{{msg}}</p>
</div>
</template> <script>
export default {//配置对象(与vue一致)
data(){//必须写函数
return{
msg:'Hello Vue Component'
}
}
}
</script> <style>
.msg{
color:red;
font-size: 30px;
}
</style>

(18).App.vue<template>

  <div>
<img class="logo" src="./assets/logo.png" alt="logo">
<!--3.使用组件标签-->
<HelloWorld/>
</div>
</template> <script>
//1.引入组件
import HelloWorld from './components/HelloWorld'
export default{
//2.映射组件标签(components可以配置多个)
components:{
HelloWorld
}
}
</script> <style>
.logo{
width:200px;
height:200px;
}
</style>
(19).main.js
/*
* 入口js:创建Vue实例
* */
import Vue from 'vue'
//将App组件渲染到index.html
//1.先引入
import App from './App.vue' new Vue({
//el需要查看index.html
el:'#app',
//将App组件渲染到index.html
//2.将它映射为标签
components:{
App
},
//3.使用组件标签
//将这个标签<App/>写入模板里面
template:'<App/>'
})
 

(尚019)Vue基于脚手架编写项目的更多相关文章

  1. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  2. vue进阶:基于vue-cli创建项目(搭建手脚架)

    vue-cli安装.创建项目 基于vue-cli创建的项目进行开发 使用vue-cli图形化界面搭建项目 插件与工具 一.vue-cli简介.安装.创建项目 Vue-cli是基于Vue.js进行快速开 ...

  3. 基于gulp编写的一个简单实用的前端开发环境好了,安装完Gulp后,接下来是你大展身手的时候了,在你自己的电脑上面随便哪个地方建一个目录,打开命令行,然后进入创建好的目录里面,开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json,打开的速度看你的网速了注意:以下是为了演示 ,我建的一个目录结构,你自己可以根据项目需求自己建目

    自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...

  4. vue学习记录①(vue-cli脚手架构建项目结构)

    我们直接从vue的工程化开始入手. 在这里用git命令行搭建项目环境.(当然直接cmd命令行下也是一样的) git下载安装地址:https://www.git-scm.com/download/win ...

  5. Vue.js用脚手架创建项目

    安装全局脚手架 cnpm install vue-cli -g vue --version 用脚手架创建项目 创建项目 运行项目 停止项目:Ctrl+C 修改端口 config - index.js ...

  6. vue简单的脚手架搭建项目

    第一步 node环境安装 1.如果本机没有安装node运行环境,下载node安装包进行安装 下载地址:https://nodejs.org/en/或者http://nodejs.cn/ 第二步 nod ...

  7. 1.vue脚手架搭建项目

    前言: 在使用Vue-cli脚手架搭建项目之前,需要安装node.js和npm以及vue-cli. 开始搭建项目: 1.打开cmd win+R 2.转到要搭建的项目路径: g: cd Webapp/v ...

  8. 基于maven的项目脚手架,一键创建项目的项目模板

    制作基于maven的项目脚手架 Springboot的出现极大的简化了项目开发的配置,然而,到真实使用的时候还是会有一堆配置需要设定.比如依赖管理,各种插件,质量扫描配置,docker配置,持续集成配 ...

  9. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

随机推荐

  1. Python之路【第十五篇】开发FTP多线程程序

    要求: 1.用户加密认证 2.允许同时多用户登录 3.每个用户有自己的家目录,且只能访问自己的家目录 4.对用户进行磁盘配额,每个用户的可用空间不同 5.允许用户在ftp server上随意切换目录 ...

  2. ALV报表——发送Excel报表邮件

    ABAP发送报表邮件 运行效果: 代码: *&---------------------------------------------------------------------* *& ...

  3. java之spring之整合ssh-2

    这篇也是主要讲解 ssh 的整合,不同于上一篇的是它的注入方式. 这篇会采用扫描注入的方式,即去除 applicationContext-asd.xml 文件. 目录结构如下: 注意,这里只列举不同的 ...

  4. jQuery.Form.js使用方法

    一.jQuery.Form.js 插件的作用是实现Ajax提交表单. 方法: 1.formSerilize() 用于序列化表单中的数据,并将其自动整理成适合AJAX异步请求的URL地址格式. 2.cl ...

  5. CephFS 使用

    原文:https://www.jianshu.com/p/c22ff79c4452 之前介绍了 RBD 的使用方法,有了 RBD,远程磁盘挂载的问题就解决了,但 RBD 的问题是不能多个主机共享一个磁 ...

  6. 自学Python编程的第八天----------来自苦逼的转行人

    2019-09-18-21:11:24(初学者不会学博客,望大家见谅见谅) 今天学的内容是有关list..dict.set集合的使用方法和注意事项 list和dict在循环中不可删,而且list在迭代 ...

  7. ROS的安装与使用

    一.apt方式安装 安装 说起ROS,可能大家现在或多或少都有所了解.现如今世界机器人发展之迅猛犹如几十年前计算机行业一样,机器人也逐渐进入到千家万户,大到工业机器人,小到家用的服务型机器人,各式各样 ...

  8. trackingjs+websocket+百度人脸识别API,实现人脸签到

    在公司做了个年会的签到.抽奖系统.用java web做的,用公司的办公app扫二维码码即可签到,扫完码就在大屏幕上显示这个人的照片.之后领导让我改得高大上一点,用人脸识别来签到,就把扫二维码的步骤改成 ...

  9. unity 用LineRender画四边形并测面积

    作为一个菜鸡,这个高中数学题差不多废了我两个上午...好了,废话不多说,直接上代码... using System.Collections.Generic; using UnityEngine; pu ...

  10. [I2C].I2C总线详解

    转自:https://www.cnblogs.com/BitArt/archive/2013/05/27/3101037.html 一. 基本信息 1. 概述 I²C 是Inter-Integrate ...