vue项目开发流程附加模板
文章目录
介绍
用vue 结合element-ui ,iview设计的用于智慧林业产品的前端开发库,借鉴github部分代码,也遇见许多为,积累了丰富经验总结出这个vue的单页面多级应用开发模板。
参考文献:vue.js官网
功能
- 单页面的按需加载,(相关路由配置见页面的roouter/inidex.js)
- 按需加载组件见ComponentPage页面
- 用户及组织机构管理
- 角色管理,权限管理 。
- 消息中心
- 用户登录
- 404页面 common/vue/404
- 403页面 common/vue/403
- 换肤功能
- v-dialog拖动指令common/js/directives
安装步骤
github Demo地址
- github Demo地址
- svn check out // 把模板下载到本地 github Demo地址
cd ComponentAdminFrame // 进入模板目录
npm install // 安装项目依赖,等待安装完成之后,安装失败可用 cnpm 或 yarn
转至目录
工程目录说明
-
build 文件夹:
这个文件夹主要是进行webpack的一些配置,就我个人觉得啊~对我们最有用并且可能会使用的就是webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三个webpack的配置文件,分别是基本webpack配置、开发环境配置、生产环境配置。实际上这些文件里面的内容,一些简单的配置都已经有了,包括入口文件、插件、loader、热更新等都已经配置好了。我们要做的只是根据自己的项目有什么loader需要增加的,比如生成环境需要加上UglifyJsPlugin插件等可以自行配置,或者一些插件增加或者不需要的删除,其实都是和业务相关了,其他的都可以不需要动。 -
config 文件夹:
这几个配置文件我觉得最主要的就是index.js 这个文件进行配置代理服务器,这个地方和我们息息相关,和后台联调就是在这里设置一个地址就可以了。打开index.js 找到“proxyTable“这个属性,然后在里面加上对应的后台地址即可,例如: -
src文件夹:整个工程最具价值的文件夹,存放绝大部分的页面代码,图片,样式的文件夹。
-
“assets”: 共用的样式、图片
-
“components”: 业务代码存放的地方,里面分成多个组件存放,一个页面是一个组件,一个页面里面还会包着很多组件
-
“router”: 设置路由
-
“App.vue”: vue文件入口界面
-
“main.js:对应App.vue 创建vue实例,也是入口文件,对应webpack.base.config.js里的入口配置
-
-
static 文件夹:
存放的文件不会经过webpack处理,可以直接引用,例如swf文件如果要引用可以在webpack配置对swf后缀名的文件处理的loader,也可以直接将swf文件放在这个文件夹引用
-
package.json:
这个文件有两部分是有用的:scripts 里面设置命令,
例如设置了dev用于调试则我们开发时输入的是npm run dev
;
例如设置了build 则是输入npm run build
用于打包;
另一部分是这里可以看到我们需要的依赖包,
devDependencies:用于本地环境开发环境,这里的包将不会被build。
dependencies:用户发布环境。
本地开发
npm run dev
- // 开启服务器,浏览器访问 http://localhost:7867
构建生产
- // 执行构建命令
npm run build
- 并将ol.js, ol.css拷贝至dist文件夹下 (也可在./index.html中更改对应openlayers引用,按实际更改)
- 将dist文件夹放在服务器下即可访问
转至目录
开发注意
- main.js,router/index.js中有许多全局设置,请慎重按需修改
- 页面代码建议加上全局class避免样式冲突
- 能使用已有方法的尽量使用common/js/common.js便于全局管理
- 获取项目基本属性尽可能用vuex (main.js中配置),同样便于全局管理
转至目录
element-ui iview
nrm :一个npm仓库管理工具
nrm是专门用来管理和快速切换私人配置的registry。当使用官方npm源安装各种包比较慢的时候,建议修改npm源地址。公司有属于自己的是有npm仓库建议使用nrm
-
nrm ls
查看nrm 配置 -
nrm current
查看当前使用的是哪个源 -
nrm add **
添加npm源,如http://registry.test.org(随便写的),起个别名叫 testnrm add test http://registry.test.org
-
nrm use **
切换源 -
nrm del **
删除nrm配置
转至目录
npm常用命令
-
npm install package_name
//安装 -
npm install package_name -g
//全局安装指定版本,项目中安装得比较少,会在该电脑中安装 -
npm install [email protected]
//项目安装指定版本 -
npm install [email protected] --save
//安装指定版本,并将包信息保存在package.json中,项目中一定加–save否则代码+ 可能在别人那跑不了 -
npm install [email protected] -dev
//安装指定版本在开发环境中,不会打包 -
npm uninstall package_name
//卸载 -
npm update package_name
//更新包
转至目录
打开cmd窗口,powerShell(win10)窗口的快捷方式
- 在当前窗口地址栏键入cmd可进入对应cmd窗口 cd XX进入当前目录某文件
- 按住shift,鼠标右击文件夹,进入对应powershell窗口
-
cd ../
向上一级
转至目录