网站首页 » 记录 » VUE开发指导提示

VUE开发指导提示

April 12, 2018 记录

1. 安装nodejs javascript 前端平台
2. 安装 npm 包管理工具
3. 安装 webpack 命令: npm install -g webpack (全局安装)| npm install webpack --save-dev (安装在本地目录的开发环境下) 也可以用包管理工具yarn 用法基本一样。速度快。

4. 如果需要起小型服务器 npm install http-server -g 在对应的目录下 http-server -cors (支持跨域参数)就可以启动服务进行静态服务开发

对vue总结: 简单来说vue是把前端资源 ( dom 结构 + js 交互操作、数据请求 + css 样式 )打成一个包module(js)
相对应的需要一些loader器去解释它,所以在装vue后,使用less、sass、或者各种模板引擎语法,就必须安装相关的loader才能解释。安装方法一样是npm install style-loader 类似的命令
5. vuejs //vuejs.org/zh-cn/ 使用可以直接引入来练习,但是完全vue开发还是要用相关生态

以上几个是基本的平台---包安装---前端资源构建打包工具。 因打包工具种类过多,选择还是最多的webpack
附一些经常用到的官网地址: http://xcondor.cn/nav.html

首先构建一个项目目录如下:

project
-src //开发目录
-mock // 模拟数据 http://mockjs.com/ 动态模拟后台数据,使前端模拟真实数据。相关文章推荐:
https://www.cnblogs.com/zhenfei-jiang/p/7235339.html
-assets //静态资源
-libs //公共库
-locale //国际化文件夹
-router // 路由 https://router.vuejs.org/zh-cn/
-store //vuex状态机 参阅 https://vuex.vuejs.org/zh-cn/
-common //公共文件-库
-views
--home //首页
--error-page //错误页面
...
...按照类目名称、项目结构定义显示层模块
login.vue
app.vue // 主模板 ***
main.js // 入口文件 所有的依赖使用vue注入公共路由注入公共文件注入都在此文件 ***

---------------------------------------------------------
package.json 目录建好后利用npm init 创建初始化文件 ***
安装了一些常用依赖的东西,会在这个文件中生成相应安装的版本和组件列表
拿到现成项目启动npm install的时候,就是根据这个配置文件去安装相应的依赖。
---------------------------------------------------------
.babelrc // babel解释器 把ES6解析成ES2015或者兼容版本的JAVASCRIPT
.editorconfig //IDE设置规范,包括tab缩进字节等
.eslintignore //放弃eslint代码检查校验文件
.gitignore // git 忽略文件 把不需要的文件忽略掉
------------------------------------------------------
.jsjint // js语法检测配置 安装它为了检测js语法 前期可忽略
.eslint // 代码检查配置 安装它是为了规范代码风格 前期可忽略

///////////////////////////////////////////////////////////////////
储备知识顺序
ES6 (JAVASCRIPT新规范、很多浏览器不支持,但是是趋势。不过babel可以将es2015解析,最好是学习) **
VUE *** 必须
WEBPACK *** 所有应用必须
VUEROUTER ** 大型应用必须
VUEX ** 大型应用必须
IVIEW * UI框架 次要

/**备注**/
*** 很重要
** 一般重要
* 重要
/** 项目参考 **/
https://github.com/xcondor/vue-admin

https://github.com/xcondor/vue2-elm 大型应用

https://github.com/iview/iview-admin iview 后台应用

https://github.com/devjin0617/vue2-admin-lte

https://github.com/lanux/Vue-Admin

https://github.com/lss5270/vue-admin-spa 单页面应用

 

按照这个思路走,少走很多弯路。