一、VUE脚手架介绍
官方说明：Vue 提供了一个官方的 CLI，为单页面应用快速搭建 (SPA) 繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。
个人理解：在实际开发中都是通过脚手架快速搭建一个vue项目，当然也可以使用CDN的方式（具体请看官网）
使用脚手架的好处：
1. 脚手架是通过webpack搭建的开发环境
2. 使用ES6语法，在低版本的浏览器中会转换为ES5去兼容
3. 打包和压缩js为一个文件
4. 项目文件在环境中编译而不是在浏览器中，这样的话访问速度更快
5. 实现页面自动刷新，即修改实时生效
二 、安装
1. 脚手架依赖于nodejs，所以我们要先安装nodejs，安装教程请自行百度，安装完成以后查看node版本和npm版本，保证node版本在6.9以上，npm版本在3.10以上
2. 安装VUE全局的CLI（命令行工具）
安装命令：npm install --global vue-cli
安装以后查看安装的版本：
vue --version
3. 新建一个vue的项目并运行它
新建项目命令：vue init webpack vue-dbspread
进入项目安装项目所需的依赖
命令：
cd vue-dbspread
npm install
运行项目：
npm run dev
项目运行在8080端口，下面我们就可以通过浏览器访问查看效果了
三、项目结构介绍
四、介绍SRC文件流程及根组件App
asset:存放图片字体
component：存放组件的文件夹
App.vue：根组件
main.js：最重要的一个文件，在里面导入了VUE和根组件App.vue，因为导入了VUE所以我们使用VUE的一切东西，所以说他是最重要的
// 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',
components: { App },
template: '<App/>'
})
访问一个VUE项目的流程：
首先是访问页面入口index.html，然后index.html加载main.js，main.js又new了一个vue的对象，然后通过vue对象加载了根组件App.vue，从而加载了根组件里面的内容在页面上显示。以下是相关文件：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-dbspread</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
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' //导入vue
import App from './App' //导入根组件App.vue Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({ //实例化一个vue对象
el: '#app', //index.html的根元素app
components: { App },//注册根组件App.vue才能使用
template: '<App/>'//VUE模板使用，可以是组件、html标签等
})
App.vue
// 1. 模板：html结构 有且只有一个根标签
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/> <!--使用组件HelloWorld -->
</div>
</template> //2. 行为：处理逻辑
<script>
//导入组件HelloWorld.vue
import HelloWorld from './components/HelloWorld' export default {
name: 'App',//组件App.vue的名字
components: {
HelloWorld //注册组件HelloWorld才能使用
}
}
</script> //3. 样式：解决样式
<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>
HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
一个VUE组件的结构说明，所有的组件都包含以下三个部分：
App.vue
// 1. 模板：html结构
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template> //2. 行为：处理逻辑
<script>
import HelloWorld from './components/HelloWorld' export default {
name: 'App',
components: {
HelloWorld
}
}
</script> //3. 样式：解决样式
<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>
VUE系列一：VUE入门：搭建脚手架CLI（新建自己的一个VUE项目）的更多相关文章
-
【vue系列之一】使用vue-cli脚手架工具搭建vue-webpack项目
最近更新了webpack配置详解,可移步vue-cli webpack详解 对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地 ...
-
Vue 系列之 基础入门
背景叙述 渐进式 JavaScript 框架 易用:已经会了 HTML.CSS.JavaScript?即刻阅读指南开始构建应用! 灵活:不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩. 高 ...
-
Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡
上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...
-
VUE搭建脚手架CLI
1.vue的安装基于node,一定要确保本机已经安装node,node安装完成之后,会自带npm包.node下载地址:nodejs.cn/download/ 安装完成以后使用 ,进入cmd使用以下命令 ...
-
Maven 系列 二 ：Maven 常用命令，手动创建第一个 Maven 项目【转】
1.根据 Maven 的约定,我们在D盘根目录手动创建如下目录及文件结构: 2.打开 pom.xml 文件,添加如下内容: <project xmlns="http://maven.a ...
-
web项目环境搭建（1）：建立一个maven项目
一.maven简介以及常用概念 1.Maven是一个项目管理和整合的工具.Maven为开发者提供了一套完整的构建生命周期框架.开发团队基本不用花多少时间就能自动完成工程的基础构建配置,因为Maven使 ...
-
Spring入门教程：通过MyEclipse开发第一个Spring项目
Animal.java package com.project; public class Animal { private String name; public String getName() ...
-
Maven 系列 二 ：Maven 常用命令，手动创建第一个 Maven 项目
1.根据 Maven 的约定,我们在D盘根目录手动创建如下目录及文件结构: 2.打开 pom.xml 文件,添加如下内容: 1 <project xmlns="http://maven ...
-
Gradle入门（3）：构建第一个Java项目
Gradle插件通过引入特定领域的约定和任务来构建你的项目.Java插件是Gradle自身装载的一个插件.Java插件提供的基本功能远比源代码编译和打包多.它为你的项目建立了一个标准的项目布局,并确保 ...
随机推荐
-
【krpano】高德地图导航插件（源码+介绍+预览）
简介 krpano可以利用js调用第三方网页版地图,因此可以实现导航效果,用来帮助用户导航到我们全景所在的位置. 效果截图如下,在手机端点击左侧按钮,便会对用户进行定位,跳转至高德地图进行导航 ...
-
JAVA的网络编程
网络编程 网络编程对于很多的初学者来说,都是很向往的一种编程技能,但是很多的初学者却因为很长一段时间无法进入网络编程的大门而放弃了对于该部分技术的学习. 在 学习网络编程以前,很多初学者可能觉得网络编 ...
-
mysql控制台命令
* mysql 链接服务器 mysql -h localhost -u root -p show processlist; update mysql.user set authentication_ ...
-
C语言每日一题之No.3
几天下来,感慨学习要坚持下来真的是件很难的事,本来说了每天一题,可是毕竟这是个细活,需要用心雕琢,有时候真的不能当天拿下来>_<.虽然说只是一题,却涉及到很多小细节,慢慢的琢磨直至完全摸透 ...
-
Tools之FindBugs
我们先来看FindBugs.(因为我们的错误通常分为两种,静态错误和动态错误也就是运行时的,而FindBugs是一个Java代码静态错误分析工具.) 1) 安装 Help->SoftWare U ...
-
Delphi TcxTreeList 怎们显示下拉列表
TcxTreeList 怎们显示下拉列表, 操作如下: 1.定义一个TStringlist中存储你的信息. 2.然后选定在TcxTreeList的哪个列要变成TCombobox, 如下图: 3. ...
-
[Swift]LeetCode390. 消除游戏 | Elimination Game
There is a list of sorted integers from 1 to n. Starting from left to right, remove the first number ...
- .net core 设置访问静态资源
-
mac通过路径找到对应的文件夹
在finder中 command + shift + G 跳出窗口中输入指定的路径,即可到达.
-
atcoder之A Great Alchemist
C - A Great Alchemist Time limit : 2sec / Stack limit : 256MB / Memory limit : 256MB Problem Carol i ...