[JavaScript知识库]安装node.js、vue.js、ElementUI

一、安装node.js

地址： Node.js ，直接下载安装长期维护版，安装一路next，安装目录可以另选自己喜欢的，其他没什么可说的，环境变量安装的时候会自己配好，安装好后，在CMD窗口输入node -v，能够显示版本号即为安装成功。

二、安装vue

注意，必须先安装node.js，才能继续本步骤。进入 安装 — Vue.js ，点击 安装 菜单，找到命令行工具CLI，点击Vue CLI的文档（ 也可以直接跳转该链接 Vue CLI ），点击语言为中文方便预览，点击快速开始，点击左边 安装 菜单，可以在CMD窗口使用

npm install -g @vue/cli# 
OR
yarn global add @vue/cli

命令，安装好后，可以在CMD窗口输入vue -V，正常显示版本信息即为安装成功。

三、创建一个vue项目

安装之前，使用命令

npm install -g cnpm --registry=https://registry.npmmirror.com

切换到淘宝镜像，这样可以使用国内网络下载创建项目。

先在自己喜欢的位置新建一个文件夹，用来存放vue项目，然后打开一个CMD窗口，cd 目录 切换到该文件夹，或者直接在文件夹的路径那里输入CMD快捷打开本路径的CMD窗口。使用命令

vue create project_name

开始创建vue项目，第一步选 Manually select features 手动选择特性，第二步使用空格选择 Balel、Router选项，回车进入下一步，第三步选择2.x这个版本，第四步选择y使用历史路由，第五步选择 In package.json ，第六步选择n不保存当前配置，然后开始等待创建完成即可。

补充：

第二步选项含义：

————————————————

( ) Babel // 支持高阶语法转换

( ) TypeScript // 支持使用 TypeScript 书写源码

( ) Progressive Web App (PWA) Support // 支持PWA

( ) Router // 路由

( ) Vuex // store

( ) CSS Pre-processors // CSS 预处理器

( ) Linter / Formatter // 代码风格检查和格式化

( ) Unit Testing // 支持单元测试

( ) E2E Testing // 支持E2E测试

————————————————

可以选择Babel，Router，Vuex，CSS Pre-processors。代码格式化一般IDE都有。

四、运行vue项目

1、使用CMD运行vue项目

vue项目创建完成之后，cd project_name 进入该新建项目，使用npm run serve命令运行项目，启动成功后，会显示可以访问的路径，使用该路径即可访问项目。

2、使用idea运行项目

使用idea打开刚创建的项目，在idea的左下部打开终端，输入npm run serve 命令运行项目。

五、为vue项目引入ElementUI

1、安装

打开ElementUI网址： Element - The world's most popular Vue UI framework ，点击菜单 安装 ，可以按此文档提示进行安装。

这里以在idea中的操作为例，CMD同理。如果项目正在运行，使用ctrl+c停止项目，然后请先确保此刻操作目录处于项目目录中（严重建议确认，CMD时出现过在其他目录下载了elementUI模块文件），然后使用

npm i element-ui -S
OR
npm install element-ui --save

命令执行安装，等待安装完毕即可。然后打开package.json文件，看下dependencies依赖中是否存在element-ui，存在证明安装成功。

2、引入js、css文件

在main.js引入js和css

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);//让vue引用Element ui