cms-前端cms管理项目搭建

创建目录结构

base:存放基础组件

base/api:基础api接口

base/component:基础组件,被各各模块都使用的组件

base/router:总的路由配置,加载各模块的路由配置文件

common:工具类 mock:存放前端单元测试方法

module:存放各业务模块的页面和api方法。 下级目录以模块名命名,

下边以cms举例: 

​ cms/api:cms模块的api接口

​ cms/component:cms模块的组件

    cms/page: cms模块的页面

     cms/router:cms模块的路由配置 

statics:存放第三方组件的静态资源

vuex:存放vuex文件,本项目不使用

static:与src的平级目录,此目录存放静态资源


启动**

导包之后

启动文件:

1、进入 webpacktest02目录,执行npm run dev

2、使用webstorm,右键package.json文件,选择“Show npm Scripts”

打开窗口: 1564237821299

双击 dev。

注意:dev就是在package.json中配置的webpack dev server命令。

发现启动成功自动打开浏览器。

修改src中的任意文件内容,自动加载并刷新浏览器。

HuangRui

Every man dies, not every man really lives.

HaungRui, China suixinblog.cn