关于前端的碎碎念6-Vue + Element UI 页面创建

1.由于vue项目依赖 node.js npm 需要先安装. npm安装

nodejs下载地址http://nodejs.cn/  选择与你电脑匹配的安装包进行安装

下载完成之后双击打开安装包，进行默认安装，当点击下一步下一步到完成的时候即安装完成

win+r   输入cmd回车，打开命令窗口  输入node -v  回车 检查node,js的版本  然后输入npm -v 回车检查npm版本

或者可以通过淘宝镜像进行安装node

$  npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

这样就可以使用cnpm 命令来安装模块了：

2.安装vue-cli

npm install -g @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确：

vue --version   vue -V

选定路径，新建vue项目，这里我是在桌面上新建了demo文件夹，cd目录路径

下面我以项目名为my-vue新建vue项目

安装vue/cli-init依赖

npm install -g @vue/cli-init

vue init webpack  "my-vue"

注意 如果这里不选择no 会选择严格格式 接下来编写项目的时候会出现很多警告错误

现在已经创建好了 我们先进项目目录 cd my-vue  然后npm install 安装一下依赖

你可以在你选择的文件加下看到这些文件 （其中node-modules是依赖安装后出现的，没安装依赖以前是没有node_modules文件夹的）

这个Vue项目的package.json 这个文件里记录了一下 这个项目的基本信息 像是作者、工具等

 npm run dev 执行命令运行

http://localhost:8080 项目预览地址

成功

3.安装Element UI

npm i element-ui -S

这里就可以看到已经安装完成

4.利用Element UI+vue创建一个简单的后台模板

这里要用到路由跳转页面，先安装一下路由依赖

体验一下 注意elementui和router 必须先引入后才能使用 不然会报错

创建一个views文件夹 用来放置所用页面

路由配置

左侧导航配置

index页面