Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
主要是基于2.9.6
版本进行测试学习
参考菜鸟教程
直接在官网下载vue.min.js,并标签引入
以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。
npm版本需要大于3.0
,如果低于此版本需要升级
# 查看版本
$ npm -v
2.3.0
# 升级npm
$ npm install -g npm
如果使用npm下载很慢可以选择更换镜像地址,或者切换为用淘宝的镜像及其命令 cnpm
在用 Vue.js 构建大型应用时推荐使用 NPM 安装:
npm install vue
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置,默认全按回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project".
To get started:
cd my-project
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
进入项目,安装并运行:
$ cd my-project
$ npm install
$ npm run dev
DONE Compiled successfully in 4388ms
> Listening at http://localhost:8080
成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:
**注意:**Vue.js 不支持 IE8 及其以下 IE 版本。
打开项目目录结构如下
目录/文件 | 说明 |
---|---|
build |
项目构建(webpack)相关代码 |
config |
配置目录,包括端口号等。我们初学可以使用默认的。 |
node_modules |
npm 加载的项目依赖模块 |
src |
这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件: * assets : 放置一些图片,如logo等。* components : 目录里面放了一个组件文件,可以不用。* router : 项目的路由* App.vue : 项目入口文件,我们也可以直接将组件写这里,而不使用 components * main.js : 项目的核心文件。 |
static |
静态资源目录,如图片、字体等。 |
test |
初始测试目录,可删除 |
.xxxx 文件 |
这些是一些配置文件,包括语法配置,git配置等。 |
index.html |
首页入口文件,你可以添加一些 meta 信息或统计代码。 |
package.json |
项目配置文件。 |
README.md |
项目的说明文档,markdown 格式 |
在前面我们打开 APP.vue
文件,代码如下(解释在注释中)
<template>
<div id="app">
<img src="./assets/logo.png">
<hello>hello>
div>
template>
<script>
// 导入组件
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
script>
<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>
接下来我们可以尝试修改下初始化的项目,将 Hello.vue 修改为以下代码:
<template>
<div class="hello">
<h1>{
{ msg }}h1>
div>
template>
<script>
export default {
name: 'hello',
data () {
return {
msg: '欢迎来到菜鸟教程!'
}
}
}
script>
重新打开页面 http://localhost:8080/,一般修改后会自动刷新,显示效果如下所示:
到这里,因为我们的版本不同,你生成的APP.vue
代码可能和我的不太一样,没有import
等代码
src/APP.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
div>
template>
<script>
// 设置组件名称
export default {
name: 'App'
}
script>
<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>
src/components/HelloWorld.vue
<template>
<div class="hello">
<h1>{
{ msg }}h1>
<h2>Essential Linksh2>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docsa>li>
<li><a href="https://forum.vuejs.org" target="_blank">Foruma>li>
<li><a href="https://chat.vuejs.org" target="_blank">Community Chata>li>
<li><a href="https://twitter.com/vuejs" target="_blank">Twittera>li>
<br>
<li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Templatea>li>
ul>
<h2>Ecosystemh2>
<ul>
<li><a href="http://router.vuejs.org/" target="_blank">vue-routera>li>
<li><a href="http://vuex.vuejs.org/" target="_blank">vuexa>li>
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loadera>li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vuea>li>
ul>
div>
template>
<script>
// 设置组件名称,msg信息
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
script>
<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>
src/main.js
初始话项目
// 导入
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
// 初始化
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
src/router/index.js
配置访问HelloWorld.vue
的路由
import Vue from 'vue'
import Router from 'vue-router'
// 导入组件
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
// 指定路由地址
path: '/',
// 设置属性名,方便在页面中通过{
{ $route.name }}方式进行获取
name: 'HelloWorld',
// 设置上边导入的组件
component: HelloWorld
}
]
})
接下来可以尝试将HelloWorld.vue
修改为如下代码
<template>
<div class="hello">
<h1>{
{ msg }}h1>
div>
template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Hello Vue.js'
}
}
}
script>
<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>
重新打开http://localhost:8080/,展示效果如下图