vue前端开发项目框架搭建(node+webpack+vue)

快来打我* 2023-09-25 11:53 34阅读 0赞

node下载地址:https://nodejs.org/zh-cn/download/?

node安装会默认装好npm。vue前端开发项目框架搭建(node+webpack+vue)

验证安装:?

node -v?

npm -v?

![这里写图片描述][SouthEast]

vue官网:https://cn.vuejs.org/v2/guide/installation.html?

初始化项目步骤:?

2.1 全局安装 vue-cli?

npm install –global vue-cli?

2.2 创建一个基于 webpack 模板的新项目?

vue init webpack my-project?

2.3 安装依赖，走你?

cd my-project?

npm install?

npm run dev

3.1 css包

npm install bootstrap \# 响应式编程框架?

npm install fontawesome \# 图标字体库?

bootstrap官网:http://v3.bootcss.com/?

fontawesome官网:http://fontawesome.dashgame.com/

3.2 ui框架包

ui框架包二选一就行

npm i element-ui -S?

或者?

npm install iview

element-ui官网:http://element-cn.eleme.io/\#/zh-CN/component/installation?

iview官网:https://www.iviewui.com/docs/guide/install

3.3 安装mock

前后端分离，前端通过mock开发，无需等待后端接口开发好了再开发?

npm install mockjs

3.4 安装异步编程框架axios

axios用来与后端接口做ajax交互请求用的?

npm install axios

axios-mock-adapter用来配合mock开发,mockjs可监听api请求是否可用，如不可用则返回mock测试数据?

npm install axios-mock-adapter

3.5 vue中支持jsx语法

用elementui就需要安装下面这些包?

npm install babel-helper-vue-jsx-merge-props?

npm install babel-plugin-syntax-jsx?

npm install babel-plugin-transform-vue-jsx?

然后在.babelrc文件中的plugins加上”transform-vue-jsx”?

![这里写图片描述][SouthEast 1]

vue前端开发项目框架搭建(node+webpack+vue)

![这里写图片描述][SouthEast 2]

github地址:https://github.com/xiaoping1988/ping-vue-admin?

此项目是我用vue+elementui开发的一个后台系统模板，可作为脚手架工程用

demo地址:https://xiaoping1988.github.io/index.html

[SouthEast]: https://img-blog.csdn.net/20171210231106192?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb3BpbmdfMTk4OA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: https://img-blog.csdn.net/20171210235506714?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb3BpbmdfMTk4OA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 2]: https://img-blog.csdn.net/20171211000306124?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb3BpbmdfMTk4OA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

发表评论取消回复

表情：

评论列表（有 0 条评论，34人围观）

还没有评论，来说两句吧...

相关阅读

相关【前端】搭建Vue3框架

目录一、搭建准备二、node.js安装 1、下载并安装 2、配置默认安装目录和缓存日志目录 ①、创建默认安装

ゝ一纸荒年。/ 2023年10月14日 14:06/ 0 赞/ 65 阅读

相关 vue前端开发项目框架搭建(node+webpack+vue)

　　node下载地址:https://nodejs.org/zh-cn/download/? 　　node安装会默认装好npm。vue前端开发项目框架搭建(node+webp

快来打我*/ 2023年09月25日 11:53/ 0 赞/ 35 阅读

相关搭建vue+webpack前端开发框架

　　想要更方便的以及以模块化形式开发vue，需要用webpack,而且webpack依赖于node运行。所以需要先安装nodejs 　　? 　　1.安装node:直接

末蓝、/ 2023年09月25日 11:50/ 0 赞/ 14 阅读

相关使用Idea搭建vue前端项目

前言【1】安装node.js，配置好环境变量，并指向taobao镜像地址【2】安装Vue-cli3 【3】vue create 项目名称【4】vue ad

悠悠/ 2023年01月07日 07:23/ 0 赞/ 406 阅读

相关 VUE项目学习（一）：搭建VUE前端项目

VUE项目学习（一）：搭建VUE前端项目 1、安装node.js环境（1）下载node.js，下载地址为：[https://nodejs.org/en/][htt

╰半夏微凉°/ 2022年12月31日 11:28/ 0 赞/ 226 阅读

相关前端开发框架搭建

前言前端项目搭建初始化及配置 -------------------- 前端项目初始化前端项目使用 vue-element-admin项目 git

深碍√TFBOYSˉ_/ 2022年12月27日 12:38/ 0 赞/ 143 阅读

相关 Vue 搭建一个前端项目

一、前言之前图省事，都是在html中引入`Vue.js`的CDN来使用Vue开发网站项目，其实正确的做法应该是使用Vue构建一个完整的项目，进而进行前后端分离的开发。

ゞ浴缸里的玫瑰/ 2022年12月05日 15:16/ 0 赞/ 243 阅读

相关前端框架搭建

项目搭建 git clone https://github.com/PanJiaChen/vue-element-admin cd vue-element

墨蓝/ 2022年08月28日 06:46/ 0 赞/ 268 阅读

相关 VUE项目搭建与开发

一、 VUE简介 Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。相比

电玩女神/ 2022年05月14日 05:07/ 0 赞/ 194 阅读

相关项目搭建篇：前端界面（vue）

新建vue项目： [http://www.jianshu.com/p/de410cefd788][http_www.jianshu.com_p_de410cefd788]

柔情只为你懂/ 2021年06月24日 16:11/ 0 赞/ 496 阅读