VUE系列一：VUE入门：搭建脚手架CLI（新建自己的一个VUE项目）
一、VUE脚手架介绍官方说明：Vue 提供了一个，为单页面应用快速搭建 (SPA) 繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅?。 个人理解：在实际开发中都是通过脚手架快速搭建一个vue项目，当然也可以使用CDN的方式（具体请看官网） 使用脚手架的好处： 1. 脚手架是通过webpack搭建的开发环境 2. 使用ES6语法，在低版本的浏览器中会转换为ES5去兼容 3. 打包和压缩js为一个文件 4. 项目文件在环境中编译而不是在浏览器中，这样的话访问速度更快 5. 实现页面自动刷新，即修改实时生效 二 、安装1. 脚手架依赖于nodejs，所以我们要先安装nodejs，安装教程请自行百度，安装完成以后查看node
VUE 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的一切东西，所以说他是最重要的
Vue from 'vue'
App from './App'Vue.config.productionTip = <span style="color: #0000ff">false
<span style="color: #008000">/ <span style="color: #008000"> eslint-disable no-new <span style="color: #008000">/<span style="color: #0000ff">new<span style="color: #000000"> Vue({ el: '#app'<span style="color: #000000">,components: { App },template: ''<span style="color: #000000"> }) ?访问一个VUE项目的流程： 首先是访问页面入口index.html，然后index.html加载main.js，main.js又new了一个vue的对象，然后通过vue对象加载了根组件App.vue，从而加载了根组件里面的内容在页面上显示。以下是相关文件： ?index.html
vue-dbspread
main.js
import Vue from 'vue'
import App from './App'
=
<span style="color: #008000">/ <span style="color: #008000"> eslint-disable no-new <span style="color: #008000">/<span style="color: #0000ff">new Vue({ <span style="color: #008000">//<span style="color: #008000">实例化一个vue对象 el: '#app',<span style="color: #008000">//<span style="color: #008000">index.html的根元素app components: { App },<span style="color: #008000">//<span style="color: #008000">注册根组件App.vue才能使用 template: ''<span style="color: #008000">//<span style="color: #008000">VUE模板使用，可以是组件、html标签等 })
<span style="color: #008000">//<span style="color: #008000">2. 行为：处理逻辑 <span style="color: #008000">//<span style="color: #008000">3. 样式：解决样式 HelloWorld.vue {{ msg }}
Essential Links
Ecosystem
App.vue <span style="color: #008000">//<span style="color: #008000">2. 行为：处理逻辑 <span style="color: #008000">//<span style="color: #008000">3. 样式：解决样式 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
