可视化展示——初识Element UI vue
初识Element UIvue前端界面的探索Vue&Element UI安装vue-cli3.x加 ElementUI创建及运行项目前端界面的探索Element UI是基于vue.js的一款桌面端组件库,里面有许多比较精美的前端组件。Vue&Element UI安装首先需要安装npm(node.js是随同NodeJS一起安装的包管理工具),首先先来了解一下这三个东西是干什么的:np
初识Element UI vue
前端界面的探索
Element UI是基于vue.js的一款桌面端组件库,里面有许多比较精美的前端组件。
Vue & Element UI安装
首先需要安装npm(node.js是随同NodeJS一起安装的包管理工具),首先先来了解一下这三个东西是干什么的:
- npm: Nodejs下的包管理器。
- webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
- vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)
-
官网下载node.js https://nodejs.org/en/download/ 一路next即可(可以选择自己合适的路径进行安装)
-
npm更新 安装成功查看node 和npm版本号,此时的npm不是最新的npm 需要进行更新
-
在nodeJS文件下建立两个新的文件夹 ,命名如下:
-
然后在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
上述内容详见:
https://blog.csdn.net/qq_41798302/article/details/106647388
更多推荐
所有评论(0)