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

1.下载安装node和npm

node下载地址:https://nodejs.org/zh-cn/download/
node安装会默认装好npm
验证安装:
node -v
npm -v

2.参考vue官网,初始化一个vue项目

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.安装一些常用包

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”

4.项目目录规划

用一张图来展示

5.脚手架项目

github地址:https://github.com/xiaoping1988/ping-vue-admin
此项目是我用vue+elementui开发的一个后台系统模板，可作为脚手架工程用

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