地址: Node.js ,直接下载安装长期维护版,安装一路next,安装目录可以另选自己喜欢的,其他没什么可说的,环境变量安装的时候会自己配好,安装好后,在CMD窗口输入node -v,能够显示版本号即为安装成功。
注意,必须先安装node.js,才能继续本步骤。进入 安装 — Vue.js ,点击 安装 菜单,找到命令行工具CLI,点击Vue CLI的文档( 也可以直接跳转该链接 Vue CLI ),点击语言为中文方便预览,点击快速开始,点击左边 安装 菜单,可以在CMD窗口使用
npm install -g @vue/cli#
OR
yarn global add @vue/cli
命令,安装好后,可以在CMD窗口输入vue -V,正常显示版本信息即为安装成功。
安装之前,使用命令
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项目创建完成之后,cd project_name 进入该新建项目,使用npm run serve命令运行项目,启动成功后,会显示可以访问的路径,使用该路径即可访问项目。
使用idea打开刚创建的项目,在idea的左下部打开终端,输入npm run serve 命令运行项目。
打开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,存在证明安装成功。
在main.js引入js和css
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);//让vue引用Element ui