快捷搜索:  汽车  科技

vueelementui环境搭建(vue-element-admin完整开源项目介绍)

vueelementui环境搭建(vue-element-admin完整开源项目介绍)建议npm i进行安装依赖,虽然有点慢。如果安装cnpm,也可以,但是据说经常报错,cnpm有时候用起来会有很多问题,无缘无故地安装些多余的东西。https://github.com/PanJiaChen/vue-element-admin打开终端,非root的根目录下git clone https://github.com/PanJiaChen/vue-element-admin.git cd vue-element-admin npm install #这种安装报错,先按照下面的按照 npm install --registry=https://registry.npm.taobao.org --loglevel=silly npm cache clean --force npm install #再从这里安装,就不会报错 npm run dev #打开说明:npm i=npm

1 说明:

1.1 从一个广受好评的开源项目:vue-element-admin的本地化,来初步分析vue的相关知识。

vueelementui环境搭建(vue-element-admin完整开源项目介绍)(1)

1.2 提前安装:git、node、npm,本机查询结果:

git --version #git version 2.11.0 npm --version #6.13.4 node --version #v12.16.1

vueelementui环境搭建(vue-element-admin完整开源项目介绍)(2)

2 github地址和下载本地部署:

https://github.com/PanJiaChen/vue-element-admin

打开终端,非root的根目录下

git clone https://github.com/PanJiaChen/vue-element-admin.git cd vue-element-admin npm install #这种安装报错,先按照下面的按照 npm install --registry=https://registry.npm.taobao.org --loglevel=silly npm cache clean --force npm install #再从这里安装,就不会报错 npm run dev #打开

说明:npm i=npm install

如果安装cnpm,也可以,但是据说经常报错,cnpm有时候用起来会有很多问题,无缘无故地安装些多余的东西。

建议npm i进行安装依赖,虽然有点慢。

3 自动弹出界面:

vueelementui环境搭建(vue-element-admin完整开源项目介绍)(3)

4 直接点击:login,进入即可

vueelementui环境搭建(vue-element-admin完整开源项目介绍)(4)

5 用微软vscode编辑器打开文件夹

vueelementui环境搭建(vue-element-admin完整开源项目介绍)(5)

6 自己可以根据已经开源的项目,进行局部修改进行vue的相关学习。

vue的结构的一般和大概了解。

├── build // 构建相关 ├── config // 配置相关 ├── src // 源代码 │ ├── api // 所有请求 │ ├── assets // 主题 字体等静态资源 │ ├── components // 全局公用组件 │ ├── directive // 全局指令 │ ├── filtres // 全局 filter │ ├── icons // 项目所有 svg icons │ ├── lang // 国际化 language │ ├── mock // 项目mock 模拟数据 │ ├── router // 路由 │ ├── store // 全局 store管理 │ ├── styles // 全局样式 │ ├── utils // 全局公用方法 │ ├── vendor // 公用vendor │ ├── views // view │ ├── App.vue // 入口页面 │ ├── main.js // 入口 加载组件 初始化等 │ └── permission.js // 权限管理 ├── static // 第三方不打包资源 │ └── Tinymce // 富文本 ├── .babelrc // babel-loader 配置 ├── eslintrc.js // eslint 配置项 ├── .gitignore // git 忽略项 ├── favicon.ico // favicon图标 ├── index.html // html模板 └── package.json // package.json

7 今日到此,下次学习。

猜您喜欢: