(尚019)Vue基于脚手架编写项目
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基于脚手架编写项目的更多相关文章
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- vue进阶:基于vue-cli创建项目(搭建手脚架)
vue-cli安装.创建项目 基于vue-cli创建的项目进行开发 使用vue-cli图形化界面搭建项目 插件与工具 一.vue-cli简介.安装.创建项目 Vue-cli是基于Vue.js进行快速开 ...
- 基于gulp编写的一个简单实用的前端开发环境好了,安装完Gulp后,接下来是你大展身手的时候了,在你自己的电脑上面随便哪个地方建一个目录,打开命令行,然后进入创建好的目录里面,开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json,打开的速度看你的网速了注意:以下是为了演示 ,我建的一个目录结构,你自己可以根据项目需求自己建目
自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...
- vue学习记录①(vue-cli脚手架构建项目结构)
我们直接从vue的工程化开始入手. 在这里用git命令行搭建项目环境.(当然直接cmd命令行下也是一样的) git下载安装地址:https://www.git-scm.com/download/win ...
- Vue.js用脚手架创建项目
安装全局脚手架 cnpm install vue-cli -g vue --version 用脚手架创建项目 创建项目 运行项目 停止项目:Ctrl+C 修改端口 config - index.js ...
- vue简单的脚手架搭建项目
第一步 node环境安装 1.如果本机没有安装node运行环境,下载node安装包进行安装 下载地址:https://nodejs.org/en/或者http://nodejs.cn/ 第二步 nod ...
- 1.vue脚手架搭建项目
前言: 在使用Vue-cli脚手架搭建项目之前,需要安装node.js和npm以及vue-cli. 开始搭建项目: 1.打开cmd win+R 2.转到要搭建的项目路径: g: cd Webapp/v ...
- 基于maven的项目脚手架,一键创建项目的项目模板
制作基于maven的项目脚手架 Springboot的出现极大的简化了项目开发的配置,然而,到真实使用的时候还是会有一堆配置需要设定.比如依赖管理,各种插件,质量扫描配置,docker配置,持续集成配 ...
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
随机推荐
- 有些CCS工程中为什么会有两个CMD文件?
这里的CCS就是TI公司的Code Composer Studio 集成开发环境,所以这篇随笔也就是关于TI公司DSP开发过程中对于刚入门同学的一个常见问题了. 那作为一个初学者,对于CCS工程中的c ...
- Oracle的字串處理
Oracle的字串處理 除了寫程式之外,資料庫的應用也是蠻重要的,而SQL語法,用法大致相同,但各公司所出的資料庫還是有所差別,而ORACLE SQL給了相當多的函數應用,下面列了一些函法的名稱和用法 ...
- BZOJ3514 / Codechef GERALD07 Chef and Graph Queries LCT、主席树
传送门--BZOJ 传送门--VJ 考虑使用LCT维护时间最大生成树,那么对于第\(i\)条边,其加入时可能会删去一条边.记\(pre_i\)表示删去的边的编号,如果不存在则\(pre_i = 0\) ...
- git如何支持doc文档
这个问题很容易解决,只要添加一个 .gitattributes 内容如下: ////////////////////////////////////////////////////////////// ...
- 使用 kill 命令杀死 java进程,你用对了吗?
在本地调试agent相关功能,需要经常性的杀掉Java进程,验证一些极端情况. 每次都是本能执行如下步骤 jps kill -9 <pid> reboot 有一次验证,发现代码中添加的Sh ...
- nodejs中的_filename和_dirname
_filename和_dirname都不是全局对象下的属性,它们都是模块下的 _filename:返回当前模块文件被解析过后的绝对路径,该属性并非全局,而是模块作用域下的 console.log(_f ...
- JS基础理论相关知识
1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同:XHTML 元素必须被正确地嵌套.XHTML 元素必须被关闭.标签名必须用 ...
- java程序员常用的cmd命令
1.查看端口号或者进程号使用情况 1.1.查看所有端口占用情况 C:\Users\Administrator>netstat -ano 活动连接 协议 本地地址 (ip:端口) 外部地址 状态 ...
- <choose><when><if>
--说明:choose类似于switch,其中的when如果不符合则进入otherwise(类似于default),可以结合if标签使用. -- <select> -- SELECT * ...
- BIND 主从配置
BIND 主从配置 环境:master:172.31.182.144slave:172.31.182.147 一.安装yum install bind bind-chroot -y 二.master ...