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