Vue开发
文章目录
一、Vue是什么?
Vue (读音 /vju/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
二、Vue安装(npm方法)
1.安装node.js
从node.js官网下载并安装node,安装过程很简单,一直点下一步就ok了,安装完之后,我们通过打开命令行工具(win+R),输入node -v 命令,查看node的版本,若出现相应的版本号,则说明你安装成功了。
安装完node.js也就有了npm管理器,它是集成在node中的,输入 npm -v 命令,显示npm的版本信息。
2.安装cnpm
在命令行中输入
npm install -g cnpm --registry=http://registry.npm.taobao.org
然后等待,没报错表示安装成功.
3.安装vue-cli脚手架构建工具
必须在全局安装
在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。
检验是否安装成功:vue -V
webpack的版本查询:webpack -v
一般以此法安装的vue为2.0+版本,vue3.0以后的版本有ui界面,所以下面我们对vue进行升级.
4.安装vue3.0
打开控制台,输入
npm install -g @vue/cli
之后可能会发现输入vue ui没有反应
输入vue -h查看commands,发现没有ui [oprions]的选项
输入cnpm i -g @vue/cli 安装新的脚手架
之后再次查看commands,可以发现有ui这个选项了.
至此,vue安装完成.
三、vue使用
1、vue ui
打开控制台,输入vue ui,会出现如下界面,在此界面可以完成vue项目的创建,插件的安装和运行.
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统.
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。打开浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值,可以看到上例相应地更新。
四、目录解析
build 项目构建(webpack)相关代码
config 配置目录,包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src 要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件
assets: 放置一些图片,如logo等。
components: 目录里面放了一个组件文件,可以不用。
App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
main.js: 项目的核心文件。
static 静态资源目录,如图片、字体等。
test 初始测试目录,可删除
.xxxx文件 这些是一些配置文件,包括语法配置,git配置等。
index.html 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档,markdown 格式