如何搭建一个VUE+Element前端项目(保姆级教学)

1.安装Node环境

1.node.js下载安装不过多赘述。

如何搭建一个VUE+Element前端项目(保姆级教学)

这样就算安装成功。

2.搭建vue项目环境

 1、全局安装vue-cli

  npm install --global vue-cli

如何搭建一个VUE+Element前端项目(保姆级教学)

警告不用管(我自己也不知道啥意思能跑起来不报错就完事了)

2.创建项目文件

输入命令行:vue init webpack +你的项目名

如何搭建一个VUE+Element前端项目(保姆级教学)

框起来的部分就是你创建的项目所在的文件路径 

说明:

    Vue build ==> 打包方式,回车即可;

    Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;

    Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车;

    Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;

    Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;

3.npm install 安装依赖

如何搭建一个VUE+Element前端项目(保姆级教学)

安装之后你的项目目录里会多一个 node_moulds文件夹,这里面是依赖包

如何搭建一个VUE+Element前端项目(保姆级教学)

 4.npm run dev 启动项目

如何搭建一个VUE+Element前端项目(保姆级教学)

这样就成功啦 !!!

复制网址打开

如何搭建一个VUE+Element前端项目(保姆级教学)

3.引入elementUI

elementui官网:Element - 网站快速成型工具如何搭建一个VUE+Element前端项目(保姆级教学)https://element.eleme.cn/#/zh-CN

1.npm 安装

推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

如何搭建一个VUE+Element前端项目(保姆级教学)

2.全局引入elementui

打开项目中的main.js文件 加入以下内容

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Element)

如何搭建一个VUE+Element前端项目(保姆级教学)

 重新启动以下项目就安装完成啦,可以使用element的组件库啦!!

上一篇:python全栈开发 day12 十二、装饰器。


下一篇:day12问题