Vue学习-安装篇

Vue学习

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
主要是基于2.9.6版本进行测试学习

参考菜鸟教程

安装

1.独立版本

直接在官网下载vue.min.js,并<script>标签引入

2. 使用CDN方法

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

• Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
• unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
• cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

3. NPM方法

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 版本。

NPM创建的Vue项目目录结构

打开项目目录结构如下

目录解析

目录/文件	说明
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 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">Twitter</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>
  // 设置组件名称,msg信息
  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>
  

• 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>
  
  <!-- 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>
  

  重新打开http://localhost:8080/,展示效果如下图