Web前端框架Vue+webpack搭建

6人阅读 评论(0) 收藏 举报
分类:

Web前端框架Vue+webpack搭建

利用vue自己的脚手架工具vue-cli搭建起基本的环境配置,再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架。

基本步骤,参考URL

  1.    在开发之前需要首先安装node.js,直接百度搜索或者在其中文官网也可以下载http://nodejs.cn/download/(默认全局安装node,npm,无需手动配置环境变量,即可全局使用node和npm 命令)。装完node之后npm包管理工具也自动的安装好,安装完之后,在命令行输入node –v,npm -v,出现版本号说明安装成功。

  2.在使用npm之前,为了加速可以使用淘宝镜像源。命令:npm config set registry https://registry.npm.taobao.org,替换成功后运行npm config get registry命令显示淘宝镜像路径的话就代表替换成功。

  3.第二步全局安装vue-cli,在命令窗口运行npm install -g vue-cli,然后运行vue -V出现版本号证明安装成功。

  4.开始生成项目,在本地硬盘(不建议C盘)找一个目录存放代码,然后打开命令行cd切换到相应的路径下,然后跑 vue init webpack Vue-Project(Vue-project 为自己定义的项目名称,此处为device),生成项目文件夹。

  5. cd Vue-Project 切换到项目文件夹下 ,输入npm run dev(本地开发跑代码),将在8080端口监听前端页面。  

  6.项目默认监听的是80端口,容易跟其他应用引起端口冲突,如果需要自定义端口,在项目下打开config文件夹,打开index.js,把端口改为自定义端口如:8888,这样就避免冲突了。

  7.最后重新跑指令npm run dev   ,然后再地址栏输入http://localhost:8888,就会出现相应的前端页面。

项目结构

|– build // 项目构建(webpack)相关配置文件
| |– build.js // 生产环境构建代码
| |– check-version.js // 检查nodejs,npm
| |– utils.js //配置资源路径,配置css加载器
| |– webpack.base.conf.js // webpack基础配置
| |– webpack.dev.conf.js // webpack开发环境配置
| |– webpack.prod.conf.js // webpack生产环境配置
|– config // 项目开发环境配置
| |– dev.env.js // 开发环境变量
| |– index.js // 项目一些配置变量
| |– prod.env.js // 生产环境变量
| |– test.env.js // 测试环境变量
|– src // 源码目录
| |– components // vue公共组件
| |– store // vuex的状态管理
| |– App.vue // 页面入口文件
| |– main.js // 程序入口文件,加载各种公共组件
|– static // 静态文件,比如一些图片,json数据等
| |– data // 群聊分析得到的数据用于数据可视化
|– .babelrc // ES6语法编译配置
|– .editorconfig // 定义代码格式
|– .gitignore // git上传需要忽略的文件格式
|– README.md // 项目说明
|– favicon.ico
|– index.html // 入口页面
|– package.json // 项目基本信息

注意

ESlint:

1.审查代码是否符合编码规范和统一的代码风格;
2.审查代码是否存在语法错误; 
3.默认使用标准:https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md
4.中文网地址 http://eslint.cn/

测试框架:

Jest:Facebook 出品的一个测试框架,内置了常用的测试工具,比如自带断言、测试覆盖率工具,实现了开箱即用。
Mocha:现在最流行的JavaScript测试框架之一,在浏览器和Node环境都可以使用。

Nightwatch

 基于Node.js的验收测试框架,使用Selenium WebDriver API以将Web应用测试自动化。它提供了简单的语法,支持使用JavaScript和CSS选择器,来编写运行在Selenium服务器上的端到端测试。
查看评论

如何搭建web前端框架

1、确定项目使用的技术 根据项目的需求等来选择使用的技术(这里以angular4 +  typsescript + nodejs+mongodb举例) 2、新建一个项目的工作文件夹 使用npm ...
  • B_etterwmj
  • B_etterwmj
  • 2018年01月07日 19:18
  • 760

vue+webpack项目搭建

vue+webpack项目搭建 本文主要介绍如何自己配置配合webpack搭建一个vue项目
  • mhfe1234
  • mhfe1234
  • 2018年01月29日 15:53
  • 586

常用前端UI框架快速开发web项目

1.DWZ  国产的jQuery UI富客户端框架 框架地址:http://jui.org/ 2.jQuery LingerUI  国产前端框架 框架地址:http://www.ligerui....
  • lsx991947534
  • lsx991947534
  • 2016年04月14日 09:20
  • 9863

vue-cli脚手架搭建webpack+vue项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli   ...
  • ganle
  • ganle
  • 2017年06月20日 10:54
  • 208

jquery easyui前端页面框架搭建

1.下载easyui插件 1.1插件下载很简单 ,网上一找一大堆的,, Jquery EasyUI官网http://www.jeasyui.com/download/index.php 在页面的最...
  • qq_34545192
  • qq_34545192
  • 2017年02月24日 16:35
  • 2986

jsp程序设计(二)-jsp基本语法(2)-声明

在JSP程序中声明合法的变量和方法 JSP 语法 例子 描述声明你将要在JSP程序中用到的变量和方法。你也必须这样做,不然会出错. 你可以一次性声明多个变量和方法,只要以";"结尾就行,当然这些声...
  • jiqimiao
  • jiqimiao
  • 2007年06月13日 10:50
  • 566

用vue+webpack搭建的前端项目结构

上个项目第一次用到vue+webpack,也是我第一次尝试自动化、模块化的开发方式,总的来说就是结构太烂,开发体验差,效率低,难维护。细数的罪状有如下几条 没有servies层,全部ajax接口都和逻...
  • haihuan2004
  • haihuan2004
  • 2016年09月30日 18:40
  • 11784

webpack前端自动化框架搭建(一)

webpack搭建前端项目的简单自动化框架
  • qq_34506961
  • qq_34506961
  • 2018年01月19日 10:02
  • 253

搭建一个简单的cms前端框架

明确一点,我们的公司的项目是要求前后端分离 当然首选是node这块,警告node很多强大的功能,自己了解的不深,不过慢慢学习中 好了,接下来讲一下我的后端项目的前端部分的搭建过程 1、技术选型:...
  • qq_24930743
  • qq_24930743
  • 2018年01月25日 15:37
  • 509

几款常用的高质量web前端框架

Web前端框架就是为了节约开发成本和时间,一般开发一个项目都会用到前端框架(除非自己有前端开发团队),根据我经验找的几款web前端框架做出了分析。都是个人意见,仁者见仁智者见智。...
  • qianduankuangjia
  • qianduankuangjia
  • 2017年09月20日 17:06
  • 6969
    个人资料
    持之以恒
    等级:
    访问量: 70
    积分: 61
    排名: 165万+
    文章分类
    文章存档
    最新评论