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. 有些CCS工程中为什么会有两个CMD文件?

    这里的CCS就是TI公司的Code Composer Studio 集成开发环境,所以这篇随笔也就是关于TI公司DSP开发过程中对于刚入门同学的一个常见问题了. 那作为一个初学者,对于CCS工程中的c ...

  2. Oracle的字串處理

    Oracle的字串處理 除了寫程式之外,資料庫的應用也是蠻重要的,而SQL語法,用法大致相同,但各公司所出的資料庫還是有所差別,而ORACLE SQL給了相當多的函數應用,下面列了一些函法的名稱和用法 ...

  3. BZOJ3514 / Codechef GERALD07 Chef and Graph Queries LCT、主席树

    传送门--BZOJ 传送门--VJ 考虑使用LCT维护时间最大生成树,那么对于第\(i\)条边,其加入时可能会删去一条边.记\(pre_i\)表示删去的边的编号,如果不存在则\(pre_i = 0\) ...

  4. git如何支持doc文档

    这个问题很容易解决,只要添加一个 .gitattributes 内容如下: ////////////////////////////////////////////////////////////// ...

  5. 使用 kill 命令杀死 java进程,你用对了吗?

    在本地调试agent相关功能,需要经常性的杀掉Java进程,验证一些极端情况. 每次都是本能执行如下步骤 jps kill -9 <pid> reboot 有一次验证,发现代码中添加的Sh ...

  6. nodejs中的_filename和_dirname

    _filename和_dirname都不是全局对象下的属性,它们都是模块下的 _filename:返回当前模块文件被解析过后的绝对路径,该属性并非全局,而是模块作用域下的 console.log(_f ...

  7. JS基础理论相关知识

    1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同:XHTML 元素必须被正确地嵌套.XHTML 元素必须被关闭.标签名必须用 ...

  8. java程序员常用的cmd命令

    1.查看端口号或者进程号使用情况 1.1.查看所有端口占用情况 C:\Users\Administrator>netstat -ano 活动连接 协议 本地地址 (ip:端口) 外部地址 状态 ...

  9. <choose><when><if>

    --说明:choose类似于switch,其中的when如果不符合则进入otherwise(类似于default),可以结合if标签使用. -- <select> -- SELECT * ...

  10. BIND 主从配置

    BIND 主从配置 环境:master:172.31.182.144slave:172.31.182.147 一.安装yum install bind bind-chroot  -y 二.master ...