安装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

你可能感兴趣的:(vue,vue.js,node.js,elementui)