16-CMS前端工程创建-导入系统管理前端工程

2.1 导入系统管理前端工程

CMS系统使用Vue-cli脚手架创建， Vue-cli是Vue官方提供的快速构建单页应用的脚手架，github地址： https://github.com/vuejs/vue-cli（有兴趣的同学可以参考官方指导使用vue-cli创建前端工程），本项目对Vue-cli 创建的工程进行二次封装，下边介绍CMS工程的情况。

查看上篇文档了解Vue-Cli脚手架

2.2.1 工程结构

如果我要基于Vue-Cli创建的工程进行开发还需要在它基础上作一些封装，导入课程资料中提供Vue-Cli封装工程。

将课程资料中的xc-ui-pc-sysmanage.7z拷贝到UI工程目录中，并解压，用WebStorm打开xc-ui-pc-sysmanage目 录。

2.2.2 package.json
package.json记录了工程所有依赖，及脚本命令：

开发使用：npm run dev
打包使用：npm run build 打包后会在dist文件夹下生成要打包到服务器上的静态文件

2.2.3 webpack.base.conf.js

webpack.base.conf.js就是webpack的webpack.config.js配置文件，在此文件中配置了入口文件及各种Loader。

webpack是通过vue-load解析.vue文件，通过css-load打包css文件等。

2.2.4 main.js

main.js是工程的入口文件，在此文件中加载了很多第三方组件，如：Element-UI、Base64、VueRouter等。
index.html是模板文件。

2.2.5 src目录

src目录下存放页面及js代码。

assets：存放一些静态文件，如图片。
base：存放基础组件
base/api：基础api接口
base/component：基础组件，被各各模块都使用的组件
base/router：总的路由配置，加载各模块的路由配置文件。
common：工具类
component：组件目录，本项目不用。
mock：存放前端单元测试方法。
module：存放各业务模块的页面和api方法。
下级目录以模块名命名，下边以cms举例：
cms/api：cms模块的api接口
cms/component：cms模块的组件
cms/page： cms模块的页面
cms/router：cms模块的路由配置
statics：存放第三方组件的静态资源
vuex：存放vuex文件，本项目不使用
static：与src的平级目录，此目录存放静态资源
它与assets的区别在于，static目录中的文件不被webpack打包处理，会原样拷贝到dist目录下。

运行：

好几个命令，运行哪个呢，开发阶段，运行dev
运行项目时，ssas报错，报错如下：

解决方案：
说明node sass版本在当前环境运行不了，解决方法如下：
1.卸载当前版本node sass

npm uninstall --save node-sass

2.重新安装node sass

npm install --save node-sass

但是在执行npm install --save node-sass这个命令时，下载一半下载不动了，我又ctr+c停止，又重新运行另一个命令下载sass

cnpm install node-sass

然后再运行项目，npm run dev


成功