npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

easy-front-vue-cli

v1.0.3

Published

Vue全家桶集成方案,同时以express作为后端解决方案

Downloads

3

Readme

easy-front-vue-cli

基于vue2.0+和Webpack3.0的Vue解决方案,集成了vue-router和vuex,以express作为后端解决方案。

前言

该脚手架以express作为web server,集成了vue2.0、vue-router2.0和vuex2.0。 用于方便快速的创建工程,并实现生产环境的部署。

运行及构建

$ npm install -g vue-cli
$ vue init LuLuCodes/easy-front-vue-cli my-project
$ cd my-project
$ npm install
$ npm run dev //运行调试模式

如果你的8080端口被占用,请修改/config/index.js文件。

生产环境部署和运行

将代码clone到服务器,运行:

$ npm install
$ cd server
$ npm install
$ cd ..
$ npm run build

脚本将在server目录自动创建publicviews目录。 通过node server/bin/www启动项目(生产环境建议使用pm2)。

项目结构

├── README.md
├── build  // webpack build文件
│
├── config  // webpack 配置文件
│
├── server  // express(server端)
│   ├── bin
│   ├── config // server端配置项,包含api、oss、微信等
│   ├── logs // server端运行日志
│   ├── routes // express 路由
│   ├── app.js
│   ├── favicon.ico
│   ├── logger.js // 日志模块
│   ├── package.json
│   ├── public // 打包构建后的资源文件夹
│   └── views // 打包构建后的页面文件夹
│
├── src
│   ├── assets
│   │   ├── css
│   │   ├── fonts
│   │   ├── images
│   │   └── js // 前端js工具集
│   │
│   ├── components // vue组件
│   ├── directive // vue指令
│   ├── plugins // vue插件
│   ├── router // vue-router
│   ├── store // vuex store
│   ├── views // vue 页面
│   ├── main.js
│   └── App.vue
│
├── static // 静态资源(ui、html页面)
│
├── test 
│
├── index.html
└── package.json

页面跳转

我在mixins中加入了jump方法,用于支持原生的跳转和vue-router的跳转。 你可以查看src/main.js

import mixins from './mixins';
Vue.mixin(mixins);

jump方法有url和replace两个参数。 url代表跳转的路径,如果是一个object或者是一个不包含http的字符串,则使用vue-router跳转。如果url是一个带http的字符串则使用原生跳转。 replace代表是否替换当前页面,默认是false。

你可以直接在method中使用this.jump(url),或者在html上直接使用@click.prevent="jump('/url')"

发送 ajax 请求

由于我非常非常懒,并且觉得axios名字比较奇怪,因此利用VUX直接把axios封装成插件,你可以直接引用插件。

你可以查看src/main.js

import AjaxPlugin from './plugins/ajax';
Vue.use(AjaxPlugin);

然后你就可以愉快的偷懒了,使用this.$http进行调用了。

export default {
  name: 'hello',
  mounted () {
    this.$http(url, {})
        .then(data => {})
        .catch(error => {});
  }
};

由于我自己项目的需要,所以在src/plugins/ajax/http.js中对axios做了封装,你可以根据自己情况和喜好进行修改。

在dev中和express通讯

请在config/index.js的proxyTable中设置代理,比如

proxyTable: {
  '/customer': 'http://localhost:10091'
}