从零开始搭建vue+element-ui的前端开发框架

  |   0 评论   |   0 浏览

最近需要进行下前端开发,特此记录下前端开发框架搭建过程

1 安装node.js

官网下载安装即可 官网地址:http://nodejs.cn/download/

2 安装webpack

在命令行里面输入:npm install --global webpack 全局安装即可。

3 安装vue-cli 开发脚手架

在命令行里面输入:npm install -g @vue/cli 全局安装即可。
在命令行里面输入:npm i -g @vue/cli-init 全局安装即可。

4 创建项目并运行

在指定的目录下进入cmd界面 输入: vue init webpack webtest(项目目录名称)
然后一路enter即可。最后可以看见如下提示:

  cd webtest
  npm run dev

按照操作运行即可。最后会弹出项目运行地址,通常是:http://localhost:8080/#/ 进入地址就可以看见界面了。

5 引入element-ui

关闭项目,进入webtest文件夹,进入cmd命令行界面 输入: npm i element-ui -S 即可 安装element-ui
最后打开修改/src/main.js文件,引入element-ui

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

然后就可以在代码里面愉快的进行开发了。


标题:从零开始搭建vue+element-ui的前端开发框架
作者:hjljy
地址:https://www.hjljy.cn/articles/2020/12/08/1607422775661.html