Vue系列教程（02）- Vue环境搭建、项目创建及运行

1. 介绍

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue知识类比：

Vue类比解析nodepython、jdknode是用c++编写用来运行js代码的npm(cnpm)pipnpm是一个终端应用商城，可以换国内源cnpmvuedjangovue是用来搭建vue前端项目的

Vue的几个主要模块：

• 网络通信：axios
• 页面跳转：vue-router
• 状态管理：vuex
• Vue-UI：ICE框架

2. 安装 2.1 安装node

官网下载安装包，由于我使用的是Mac系统，大家可以根据自己的系统来下载，下载地址：https://nodejs.org/zh-cn/download/

下载根据提示安装

验证是否安装成功：

node -v 
npm -v 

安装成功！

2.2 安装Vue

1.换源安装cnpm（把镜像源配置为淘宝镜像源）：

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 安装Vue项目脚手架：

sudo cnpm install -g @vue/cli

3. 查看vue-cli是否成功

vue info

注意：如果终端安装失败时，可以清空npm缓存，再重复执行失败的步骤

npm cache clean --force

3. 项目创建 3.1 创建项目

1.打开命令窗口，进入要创建项目的目录路径：

cd 项目路径..

2.创建项目（项目名为demo）:

vue create hello-world

3.按提示选择Vue的版本，我选择默认，按Enter:

安装成功：

3.2 目录结构

可以看到Vue的目录结构如下： 目录结构解析：

├── v-proj
|	├── node_modules  	// 当前项目所有依赖，一般不可以移植给其他电脑环境
|	├── public			
|	|	├── favicon.ico	// 标签图标
|	|	└── index.html	// 当前项目唯一的页面
|	├── src
|	|	├── assets		// 静态资源img、css、js
|	|	├── components	// 小组件
|	|	├── views		// 页面组件
|	|	├── App.vue		// 根组件
|	|	├── main.js		// 全局脚本文件（项目的入口）
|	|	├── router
|	|	|	└── index.js// 路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
|	|	└── store	
|	|	|	└── index.js// 仓库脚本文件（vuex插件的配置文件，数据仓库）
|	├── README.md
└	└── package.json等配置文件

3.3 两个文件（App.vue及main.js））

1. vue组件(.vue文件)：

import HelloWorld from './components/HelloWorld.vue'


  
    
    
  



export default {
  name: 'App',
  components: {
    HelloWorld
  }
}


#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;
}

解析：

• template：有且只有一个根标签
• script：必须将组件对象导出 export default {}
• style: style标签明确scoped属性，代表该样式只在组件内部起作用(样式的组件化)

2. 全局脚本文件main.js（项目入口）

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

4.运行项目

进入新创建项目的目录，然后执行npm run serve命令，开始构建：

构建成功： 浏览器打开：http://localhost:8080/，可以看到启动成功！

4.2 如何部署到别的环境

首先要有这样一个思路，就是任何一个项目，都是在一个适合自己的特定环境下运行的，所以我们在拷贝项目的时候，可以把核心代码拿下来然后在本地安装环境。VUE项目就是如此。

具体思路就是：

1.拷贝public、src、package.json，前两个是核心代码，后面的是环境配置。

2.执行cnpm/npm install，会生成node_modules的文件夹。

3.npm run serve 运行项目就ok了。