创新实训记录1-前端界面的探索

前端界面的探索

Element UI是基于vue.js的一款桌面端组件库，里面有许多比较精美的前端组件。

Vue & Element UI安装

首先需要安装npm（node.js是随同NodeJS一起安装的包管理工具),首先先来了解一下这三个东西是干什么的：

• npm: Nodejs下的包管理器。
• webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
• vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

1. 官网下载node.js https://nodejs.org/en/download/ 一路next即可（可以选择自己合适的路径进行安装）
   

2. npm更新 安装成功查看node 和npm版本号，此时的npm不是最新的npm 需要进行更新
   

3. 在nodeJS文件下建立两个新的文件夹 ，命名如下：
   

4. 然后在cmd中执行如下命令：

npm config set prefix "D:\nodeJS\node_global"

npm config set cache "D:\nodeJS\node_cache"

5. 输入命令 配置镜像站

npm config set registry=http://registry.npm.taobao.org

6.此时如果直接运行npm install等命令会报错的。我们需要增加环境变量NODE_PATH 内容是：D:\nodeJS\node_global\node_modules

（注意，一下操作需要重新打开CMD让上面的环境变量生效）
7.测试NPM安装vue.js 和 vue-router（这里的-g是指安装到global全局目录去）

npm install vue -g
npm install vue-router -g

9.此时在cmd中输入vue -V 会报错，解决办法：
编辑环境编辑path，对path环境变量添加D:\nodeJS\node_global

vue-cli3.x 加 ElementUI创建及运行项目

1.Node 版本要求

• Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
• 重新安装vue-cli，将是最新的vue-cli版本

npm install -g @vue/cli

2.安装完后使用命令，查看安装的版本号，以及是否安装成功

vue --version

3.创建项目：，默认值创建即可

vue create hello-world

项目的目录的参考：(项目目录结构)
├── public // 静态资源
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── models // 实体类
│ ├── router // 路由及路由配置相关
│ ├── store // 全局 store管理
│ ├── utils // 全局公用方法
│ ├── pages // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
├── tests // test测试
├── .eslintrc.js // eslint配置
└── package.json

4.运行项目：

cd hellow-world
npm run serve