[vue学习]一、环境安装

1. 环境

• node[https://nodejs.org/dist/v8.9.1/node-v8.9.1-x64.msi]
• vscode [https://vscode.cdn.azure.cn/stable/dcee2202709a4f223185514b9275aa4229841aa7/VSCodeSetup-x64-1.18.0.exe]
  安装上面的两个软件，查看node是否安装成功的方式是执行以下命令
  node -v
npm -v
  npm 是和node一起安装的，执行结果如下：
  node安装结果
  vscode安装成功的话，桌面会有图标 vs code

---

2. npm 镜像

由于npm的仓储是在国外，有时候网速会慢导致安装npm包失败，故在国内使用cnpm阿里镜像，执行以下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
等待安装过程，结果如下

cnpm镜像

---

3. vue 安装

• vue官方网站[https://cn.vuejs.org/]
• vue文档地址[https://cn.vuejs.org/v2/guide/]
• 本篇文章的学习地址：vue安装[https://cn.vuejs.org/v2/guide/installation.html]
  执行命令cnpm install -g vue安装vue，执行命令cnpm install --global vue-cli安装vue-cli工具，结果如下 安装vue

---

4. 创建vue项目

现在vue已经安装成功，我们假设在E:\vuedemo 文件下创建项目，在命令行通过命令cd e:\vuedemo切换工作目录，按照官方文档执行以下命令

vue init webpack my-project

执行结果如下:

vue创建项目

• Project name ：项目名称
• Proejct description:项目说明
• Author: 作者
• Vue build: 默认 standalone
• Install vue-router：是否安装vue-router，输入Y，回车
• Use ESLint to lint your code： 是否安装ESLint规范代码，输入Y回车
• Pick an ESLint perset:默认 Standard
• Setup unit tests with Karma + Mocha :是否安装 Karma和 Mocha ，这两个插件是用来做单元测试的，默认安装，输入Y回车
• Setup e2e test with Nightwatch：安装e2e工具一遍进行端到端测试，默认安装，输入Y回车

---

5. 运行vue项目

按照以上步骤，已经成功创建vue项目，现在运行创建的vue项目，命令如下

cd my-project
cnpm install
cnpm run dev

运行结果如下

运行vue项目
此时默认浏览器会打开网址：http://localhost:8080/#/
vue运行界面
到此，表示我们的项目已经成功安装并运行

---

6. 项目结构

打开 vs code ，执行菜单文件->打开，选择路径E:\vuedemo\my-project，打开文件夹后，查看vue项目结构如下

image.png
src是所有的源代码，index.html是启动页面，build是编译需要的脚本代码，config是项目配置代码

---

7. src 文件代码

src文件夹代码如下

src代码

• assets，资源文件夹
• components,组件文件夹(页面文件夹)
• router，路由文件夹
• App.Vue，程序的主代码
• main.js，程序的入口代码
  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'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

看第4行和第14行，表示导入了App这个vue组件，并定义一个vue实例
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>

App.Vue是整个程序的框架基础，Vue为后缀的格式说明以后学习在介绍，现在主要介绍代码，
template标签主要是html代码，是这个组件的显示部分
script 标签是整个页面代码的逻辑部分，默认使用 export defaul
style标签里是整个页面的css代码

---

8.Hello Word组件如何加载的

看main.js 的第5行和第 12行，表示在mian中导入了router路由，router.js的代码如下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: HelloWorld
    }
  ]
})

查看第3行和第7行，先导入HelloWord组件，在定义默认路由/信息，使用的组件是 HelloWorld,HelloWord的代码展示部分是

HelloWord
HelloWorld.Vue组件在模块App.Vue里是如何展示的呢？在App.Vue的模板标签下，有个标签叫：<router-view/>，这里是所有路由组件加载后呈现的地方。

---

总结

• 学习vue的环境要求
• 学习如何安装vue
• 学习如何创建vue项目
• 学习如何运行vue项目
• 学习vue默认项目结构目录
• 学习vue的启动过程