Vue【第1章】：Vue介绍与安装

内容概要：

• Vue介绍

• 安装Vue

一、Vue介绍

Vue是一套用于构建用户界面的渐进式框架。Vue的核心库只关注视图层。是一个单页面框架，是基于模块化组件化的开发模式。

 

二、安装Vue

1. 安装node.js

nodejs目前使用nodejs最多的场景是前端构建工具，比如webpack、gulp。而Vue的组件要编译势必要借助webpack，所以肯定要提供npm的安装方式。目前Vue版本为2.5.x，配合nodejs的8.13.x版本使用。所以，我们安装一下nodejs8.14版本

1.1 windows上安装node.js

安装包（.msi）方式安装：

64位安装包下载地址：https://nodejs.org/dist/latest-v8.x/node-v8.14.0-x64.msi

二进制文件（.exe）方式安装：

64位安装包下载地址：https://nodejs.org/dist/latest-v8.x/win-x64/node.exe

安装完后通过以下命令检查是否安装成功：

node --version

1.2 Linux上安装node.js

直接使用已编译好的包：

Node 官网已经把 linux 下载版本更改为已编译好的版本了，我们可以直接下载解压后使用：

# wget https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xz    // 下载
# tar xf  node-v10.9.0-linux-x64.tar.xz       // 解压
# cd node-v10.9.0-linux-x64/                  // 进入解压目录
# ./bin/node -v                               // 执行node命令 查看版本
v10.9.0

#找到对应的版本即可

CentOS下源码安装Node.js

1.下载源码，你需要在https://nodejs.org/en/download/下载最新的Nodejs版本，本文以v0.10.24为例:
cd /usr/local/src/
wget http://nodejs.org/dist/v0.10.24/node-v0.10.24.tar.gz

2.解压源码
tar zxvf node-v0.10.24.tar.gz

3.编译安装
cd node-v0.10.24
./configure --prefix=/usr/local/node/0.10.24
make
make install

4.配置NODE_HOME，进入profile编辑环境变量
vim /etc/profile
#set for nodejs
export NODE_HOME=/usr/local/node/0.10.24
export PATH=$NODE_HOME/bin:$PATH

5.使其脚本生效
source /etc/profile

6.验证是否安装配置成功
node -v

2.搭建Vue的开发环境

2.1 安装Vue的脚手架工具（命令行工具）

#全局安装 vue-cli
npm install --global vue-cli

2.2 创建项目

#创建一个名为my-project的vue项目
vue init webpack my-project
#安装依赖包，必须要cd到项目里进行安装
cd my-project
npm install
#启动项目
npm run dev

-------------------- 注意 --------------------
在创建项目时还有一种方式，就是 vue init webpack-simple my-project

-------------------- 区别 --------------------
1.webpack-simple没有vue-router的中间件，
2.webpack-simple没有格式的检测
3.webpack-simple是一个简单版的，和webpack的目录差别很大
4.webpack-simple默认没有安装css-loader，所以在引入assets中的静态文件css时，需要安装依赖style-loader与css-loader，然后在webpack.config.js中进行相关的配置
5.webpack-simple可以在index.html中引入文件，webpack不可以

在创建项目时所对应的步骤说明：

E: wue>vue init webpack zjk
? Project name zjk       #项目的名称
? Project description A Uue. js pro. ject     #项目描述
? Author    #作者
? Vue build <Use arrow keys)
? Vue build standalone
? Install vue-router? Yes     #是否安装vue-router
? Vse ESLint to lint your code? No    #是否使用ESLint来代替你的代码
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run ' npm install' for you after the project has been created?<recommended)(Use arrow keys)
    Yes, use NPM
    Yes, use Yarn
    No,I will handle that myself

注意：

cnpm的说明：
    因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以我们乐于分享的淘宝团队做了这事。来自官网："这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。"

cnpm的安装：
    官方网址：http://npm.taobao.org
    安装：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org
    注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误 

cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm